Home
Uwera Dorcas
templete

templete

This tailwind example is contributed by Uwera Dorcas, on 05-Jun-2025. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode.

Other

Author Uwera Dorcas

601

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modern Animated Website</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* Base Styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
            background-size: 400% 400%;
            animation: gradient 15s ease infinite;
            color: white;
            overflow-x: hidden;
        }
        
        @keyframes gradient {
            0% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0% 50%;
            }
        }
        
        /* Navigation */
        nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 50px;
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 100;
            background: rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(10px);
            animation: fadeInDown 1s ease;
        }
        
        .logo {
            font-size: 28px;
            font-weight: 700;
            background: linear-gradient(to right, #fff, #ddd);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        .nav-links {
            display: flex;
            list-style: none;
        }
        
        .nav-links li {
            margin-left: 30px;
        }
        
        .nav-links a {
            color: white;
            text-decoration: none;
            font-weight: 500;
            position: relative;
            transition: all 0.3s ease;
        }
        
        .nav-links a:after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            background: white;
            bottom: -5px;
            left: 0;
            transition: width 0.3s ease;
        }
        
        .nav-links a:hover:after {
            width: 100%;
        }
        
        /* Hero Section */
        .hero {
            height: 100vh;
            display: flex;
            align-items: center;
            padding: 0 10%;
            position: relative;
        }
        
        .hero-content {
            max-width: 600px;
            animation: fadeInLeft 1s ease;
        }
        
        .hero h1 {
            font-size: 56px;
            font-weight: 700;
            margin-bottom: 20px;
            line-height: 1.2;
        }
        
        .hero p {
            font-size: 18px;
            margin-bottom: 30px;
            opacity: 0.9;
        }
        
        .cta-button {
            display: inline-block;
            padding: 15px 30px;
            background: white;
            color: #333;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s ease;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        }
        
        .cta-button:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
        }
        
        .hero-image {
            position: absolute;
            right: 10%;
            width: 500px;
            animation: fadeInRight 1s ease, float 6s ease-in-out infinite;
        }
        
        /* Features Section */
        .features {
            padding: 100px 10%;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
        }
        
        .section-title {
            text-align: center;
            margin-bottom: 60px;
            font-size: 36px;
            animation: fadeIn 1s ease;
        }
        
        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
        }
        
        .feature-card {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 20px;
            padding: 40px 30px;
            text-align: center;
            transition: all 0.3s ease;
            backdrop-filter: blur(5px);
            animation: fadeInUp 1s ease;
        }
        
        .feature-card:hover {
            transform: translateY(-10px);
            background: rgba(255, 255, 255, 0.2);
        }
        
        .feature-icon {
            font-size: 50px;
            margin-bottom: 20px;
            color: #fff;
        }
        
        .feature-card h3 {
            font-size: 22px;
            margin-bottom: 15px;
        }
        
        /* Footer */
        footer {
            text-align: center;
            padding: 30px;
            background: rgba(0, 0, 0, 0.2);
        }
        
        .social-links {
            margin-bottom: 20px;
        }
        
        .social-links a {
            color: white;
            font-size: 20px;
            margin: 0 10px;
            transition: all 0.3s ease;
        }
        
        .social-links a:hover {
            transform: translateY(-5px);
        }
        
        /* Animations */
        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }
        
        @keyframes fadeInDown {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        @keyframes fadeInLeft {
            from {
                opacity: 0;
                transform: translateX(-20px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        
        @keyframes fadeInRight {
            from {
                opacity: 0;
                transform: translateX(20px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        
        @keyframes float {
            0% {
                transform: translateY(0px);
            }
            50% {
                transform: translateY(-20px);
            }
            100% {
                transform: translateY(0px);
            }
        }
        
        /* Responsive */
        @media (max-width: 992px) {
            .hero-image {
                width: 400px;
            }
        }
        
        @media (max-width: 768px) {
            nav {
                padding: 15px 30px;
            }
            
            .hero {
                flex-direction: column;
                text-align: center;
                padding-top: 100px;
            }
            
            .hero-content {
                margin-bottom: 50px;
            }
            
            .hero-image {
                position: relative;
                right: auto;
                width: 100%;
                max-width: 400px;
                margin: 0 auto;
            }
        }
    </style>
</head>
<body>
    
    <nav>
        <div class="logo">LOGO</div>
        <ul class="nav-links">
            <li><a href="#">Home</a></li>
            <li><a href="#">Features</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
    
    
    <section class="hero">
        <div class="hero-content">
            <h1>Create Stunning Websites With Amazing Animations</h1>
            <p>Our template combines beautiful gradients, smooth animations, and modern design to make your website stand out from the crowd.</p>
            <a href="#" class="cta-button">Get Started</a>
        </div>
        <img src="https://via.placeholder.com/500x400" alt="Hero Image" class="hero-image">
    </section>
    
    
    <section class="features">
        <h2 class="section-title">Amazing Features</h2>
        <div class="features-grid">
            <div class="feature-card">
                <div class="feature-icon">
                    <i class="fas fa-bolt"></i>
                </div>
                <h3>Fast Performance</h3>
                <p>Optimized for speed with minimal code and efficient animations.</p>
            </div>
            <div class="feature-card">
                <div class="feature-icon">
                    <i class="fas fa-mobile-alt"></i>
                </div>
                <h3>Responsive Design</h3>
                <p>Looks great on all devices from desktop to mobile.</p>
            </div>
            <div class="feature-card">
                <div class="feature-icon">
                    <i class="fas fa-palette"></i>
                </div>
                <h3>Beautiful Animations</h3>
                <p>Smooth transitions and effects to engage your visitors.</p>
            </div>
        </div>
    </section>
    
    
    <footer>
        <div class="social-links">
            <a href="#"><i class="fab fa-facebook-f"></i></a>
            <a href="#"><i class="fab fa-twitter"></i></a>
            <a href="#"><i class="fab fa-instagram"></i></a>
            <a href="#"><i class="fab fa-linkedin-in"></i></a>
        </div>
        <p>&copy; 2023 Your Company. All rights reserved.</p>
    </footer>
</body>
</html>

Related Examples

Tailwind Google Map widget

Author:
Dung Vuong

7 months ago

444
status indicatior
status indicator navigation dashbord

Author:
Rushikesh Latpate

1 year ago

1.1k
Chatbox template

Author:
Lucas Martinez

2 years ago

12.6k
SocialSphere: A Full-Stack Social Media Platform
SocialSphere is a full-stack social media platform inspired by Facebook, built using HTML CSS

Author:
Code Master(Mfuranziza Dusabe Hamza)

8 months ago

846
Attractive Feature Section
With Gradient Color 6 Features

Author:
KULDEEP

7 months ago

828
Solo leveling 2
Animation & movie field,videos,games.

Author:
ORGIN_DREAMS

8 months ago

806
chatbot
is my chatbot

Author:
Omer fils ELENGA

3 months ago

303
Image - Figure with figcaption design

Author:
Maxim

1 year ago

892
Best Chatting dashboard
create a modern WhatsApp-like chat dashboard with 3D effects, animations, and a sleek design. This will be a static view showcasing the interface with Nicole Shalom as the developer.

Author:
Nicole Shalom

8 months ago

896
Card pricing section
Absolutely! Here's a beautiful 3-card pricing section using Tailwind CSS, with animations, dark mode support, and clearly differentiated plans (Free, Pro, and Enterprise).

Author:
Rathanak Phan

7 months ago

822
LinkedIn Post UI Mockup
A static HTML and Tailwind CSS component designed to replicate the user interface of a LinkedIn post. This mockup accurately represents the post structure including the header (avatar, name, headline, timestamp), content area (text, optional media), engagement statistics (likes, comments, reposts), and the action bar (Like, Comment, Repost, Send). It's fully responsive, supports light and dark themes, and uses appropriate iconography and styling to closely mimic the LinkedIn feed experience.

Author:
Hamza Atig

9 months ago

1.2k
Simple Login & Register Page
Login and Register Page using Tailwind, Alpine JS, and Fontawesome

Author:
Ahita Bisma Adlula

1 year ago

2.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components