Search Components

All Components

Browse all available Tailwind CSS components

Product Cards Component

A responsive product cards component designed with skeuomorphism style, earth tones color scheme, and dark theme support. Ideal for dashboards.

Open Preview

                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-4 bg-gray-100 dark:bg-gray-800">
    <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-4 transition duration-300 ease-in-out transform hover:scale-105">
        <img class="w-full h-48 object-cover rounded-lg" src="https://picsum.photos/300/200?random=1" alt="Product Image">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mt-2">Product Title 1</h2>
        <p class="text-gray-600 dark:text-gray-400 mt-1">This is a short description of the product.</p>
        <div class="flex items-center mt-2">
            <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
            <p class="ml-2 text-gray-800 dark:text-gray-200">User Name</p>
        </div>
    </div>
    <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-4 transition duration-300 ease-in-out transform hover:scale-105">
        <img class="w-full h-48 object-cover rounded-lg" src="https://picsum.photos/300/200?random=2" alt="Product Image">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mt-2">Product Title 2</h2>
        <p class="text-gray-600 dark:text-gray-400 mt-1">This is a short description of the product.</p>
        <div class="flex items-center mt-2">
            <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
            <p class="ml-2 text-gray-800 dark:text-gray-200">User Name</p>
        </div>
    </div>
    <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-4 transition duration-300 ease-in-out transform hover:scale-105">
        <img class="w-full h-48 object-cover rounded-lg" src="https://picsum.photos/300/200?random=3" alt="Product Image">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mt-2">Product Title 3</h2>
        <p class="text-gray-600 dark:text-gray-400 mt-1">This is a short description of the product.</p>
        <div class="flex items-center mt-2">
            <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar">
            <p class="ml-2 text-gray-800 dark:text-gray-200">User Name</p>
        </div>
    </div>
</div>

360° Viewer Component

A responsive 360° viewer component designed for dashboards with a 3D design style and support for dark mode.

Open Preview

                <div class="flex flex-col items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">
    <h1 class="text-4xl font-bold text-center text-gray-800 dark:text-white mb-8">360° Viewer</h1>
    <div class="relative w-full max-w-lg bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
        <img src="https://picsum.photos/600/400" alt="360° View" class="w-full h-full object-cover rounded-lg">
        <div class="absolute inset-0 flex items-center justify-center">
            <div class="bg-white dark:bg-gray-850 p-4 rounded-lg shadow text-center">
                <h2 class="text-2xl font-semibold text-gray-800 dark:text-white">Explore Data</h2>
                <p class="text-gray-600 dark:text-gray-300">Interact with the 3D model to visualize data points.</p>
            </div>
        </div>
    </div>
    <div class="grid grid-cols-3 gap-4 mt-8 w-full max-w-lg">
        <div class="bg-indigo-500 dark:bg-indigo-700 text-white p-4 rounded-lg shadow-lg text-center">
            <h3 class="text-lg font-semibold">Data Point 1</h3>
            <p class="text-sm">Details about this data point.</p>
        </div>
        <div class="bg-orange-500 dark:bg-orange-700 text-white p-4 rounded-lg shadow-lg text-center">
            <h3 class="text-lg font-semibold">Data Point 2</h3>
            <p class="text-sm">Details about this data point.</p>
        </div>
        <div class="bg-teal-500 dark:bg-teal-700 text-white p-4 rounded-lg shadow-lg text-center">
            <h3 class="text-lg font-semibold">Data Point 3</h3>
            <p class="text-sm">Details about this data point.</p>
        </div>
    </div>
    <div class="mt-8 flex items-center justify-center">
        <a href="#" class="bg-indigo-500 dark:bg-indigo-700 text-white py-2 px-4 rounded-lg shadow hover:bg-indigo-600 dark:hover:bg-indigo-800">Explore More</a>
    </div>
</div>

Two-Factor Authentication Component

A responsive two-factor authentication component using Tailwind CSS with dark theme support. Features a minimalist/flat design, monochromatic color scheme, complex layout with multiple interactive elements suitable for e-commerce.

Open Preview

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4">
  <div class="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-xl w-full max-w-md">
    <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-6">Two-Factor Authentication</h2>
    <p class="text-center text-gray-600 dark:text-gray-400 mb-6">Please enter the 6-digit code sent to your phone number.</p>
    <div class="flex justify-center space-x-2 mb-6">
      <input type="text" class="w-12 h-12 text-center text-2xl border border-gray-300 dark:border-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white" maxlength="1">
      <input type="text" class="w-12 h-12 text-center text-2xl border border-gray-300 dark:border-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white" maxlength="1">
      <input type="text" class="w-12 h-12 text-center text-2xl border border-gray-300 dark:border-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white" maxlength="1">
      <input type="text" class="w-12 h-12 text-center text-2xl border border-gray-300 dark:border-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white" maxlength="1">
      <input type="text" class="w-12 h-12 text-center text-2xl border border-gray-300 dark:border-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white" maxlength="1">
      <input type="text" class="w-12 h-12 text-center text-2xl border border-gray-300 dark:border-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white" maxlength="1">
    </div>
    <button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 rounded focus:outline-none focus:shadow-outline transition duration-200 dark:bg-blue-700 dark:hover:bg-blue-800">
      Verify Code
    </button>
    <div class="mt-6 text-center">
      <a href="#" class="text-blue-600 hover:underline dark:text-blue-500 text-sm">Resend Code</a>
      <span class="mx-2 text-gray-400 dark:text-gray-600">|</span>
      <a href="#" class="text-blue-600 hover:underline dark:text-blue-500 text-sm">Use another method</a>
    </div>
  </div>
</div>

Neumorphism Navigation

A simple responsive navigation component with Neumorphism style for e-commerce.

Open Preview

                <nav class="p-4 bg-gray-100 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark">
  <ul class="flex justify-center space-x-4">
    <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-pink-500 dark:hover:text-pink-400">Home</a></li>
    <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-pink-500 dark:hover:text-pink-400">Shop</a></li>
    <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-pink-500 dark:hover:text-pink-400">Categories</a></li>
    <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-pink-500 dark:hover:text-pink-400">Cart</a></li>
  </ul>
</nav>

Glassmorphism Carousel Slider

A responsive carousel slider component with glassmorphism style, suitable for blog and content consumption. It features multiple content slides, frosted glass-like elements, and is designed for both light and dark themes.

Open Preview

                <div class="relative w-full max-w-4xl mx-auto mt-10">
  <div class="flex overflow-hidden rounded-lg shadow-lg">
    <div class="flex-shrink-0 w-full h-64 bg-white bg-opacity-30 backdrop-blur-md border border-transparent rounded-lg dark:bg-gray-800">
      <img class="w-full h-full object-cover rounded-lg" src="https://picsum.photos/800/400?random=1" alt="Carousel Slide 1">
      <div class="absolute inset-0 flex items-center justify-center text-white opacity-80 text-2xl">Slide 1</div>
    </div>
    <div class="flex-shrink-0 w-full h-64 bg-white bg-opacity-30 backdrop-blur-md border border-transparent rounded-lg dark:bg-gray-800">
      <img class="w-full h-full object-cover rounded-lg" src="https://picsum.photos/800/400?random=2" alt="Carousel Slide 2">
      <div class="absolute inset-0 flex items-center justify-center text-white opacity-80 text-2xl">Slide 2</div>
    </div>
    <div class="flex-shrink-0 w-full h-64 bg-white bg-opacity-30 backdrop-blur-md border border-transparent rounded-lg dark:bg-gray-800">
      <img class="w-full h-full object-cover rounded-lg" src="https://picsum.photos/800/400?random=3" alt="Carousel Slide 3">
      <div class="absolute inset-0 flex items-center justify-center text-white opacity-80 text-2xl">Slide 3</div>
    </div>
  </div>
  <div class="flex justify-center mt-4">
    <button class="px-4 py-2 mx-1 text-sm font-semibold text-white bg-blue-500 rounded-full hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600">Previous</button>
    <button class="px-4 py-2 mx-1 text-sm font-semibold text-white bg-blue-500 rounded-full hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600">Next</button>
  </div>
  <div class="mt-4 flex justify-around">
    <div class="p-4 bg-white bg-opacity-30 backdrop-blur-md border border-transparent rounded-lg dark:bg-gray-800">
      <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar 1">
      <p class="text-center text-white mt-2">Author 1</p>
    </div>
    <div class="p-4 bg-white bg-opacity-30 backdrop-blur-md border border-transparent rounded-lg dark:bg-gray-800">
      <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar 2">
      <p class="text-center text-white mt-2">Author 2</p>
    </div>
    <div class="p-4 bg-white bg-opacity-30 backdrop-blur-md border border-transparent rounded-lg dark:bg-gray-800">
      <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar 3">
      <p class="text-center text-white mt-2">Author 3</p>
    </div>
  </div>
</div>

Login/Signup Component

A responsive Login/Signup component designed in Material Design style with dark theme support and complementary color scheme, tailored for social media interfaces.

Open Preview

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-8 max-w-md w-full">
        <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-gray-200 mb-6">Welcome</h2>
        <p class="text-center text-gray-600 dark:text-gray-400 mb-4">Sign in to continue or create a new account.</p>
        <div class="space-y-4">
            <form>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1" for="email">Email</label>
                    <input type="email" id="email" class="input-class" placeholder="[email protected]" required />
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1" for="password">Password</label>
                    <input type="password" id="password" class="input-class" placeholder="********" required />
                </div>
                <div>
                    <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-blue-500 dark:hover:bg-blue-400">Login</button>
                </div>
                <div class="text-center text-gray-600 dark:text-gray-400">
                    <p>Or</p>
                </div>
                <div>
                    <button type="button" class="w-full bg-green-600 hover:bg-green-700 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-green-500 dark:bg-green-500 dark:hover:bg-green-400">Sign Up</button>
                </div>
            </form>
            <div class="flex items-center justify-center space-x-4">
                <a href="#" class="flex items-center justify-center w-10 h-10 rounded-full bg-gray-300 dark:bg-gray-700 shadow-sm hover:shadow-lg transform transition duration-300">
                    <img src="https://picsum.photos/50" alt="Google" class="rounded-full" />
                </a>
                <a href="#" class="flex items-center justify-center w-10 h-10 rounded-full bg-gray-300 dark:bg-gray-700 shadow-sm hover:shadow-lg transform transition duration-300">
                    <img src="https://picsum.photos/50" alt="Facebook" class="rounded-full" />
                </a>
                <a href="#" class="flex items-center justify-center w-10 h-10 rounded-full bg-gray-300 dark:bg-gray-700 shadow-sm hover:shadow-lg transform transition duration-300">
                    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Twitter" class="rounded-full" />
                </a>
            </div>
        </div>
    </div>
</div>

<style>
    .input-class {
        display: block;
        width: 100%;
        padding: 0.5rem;
        margin-top: 0.25rem;
        border: 1px solid #d1d5db;
        border-radius: 0.375rem;
        transition: border-color 0.2s;
        color: #4b5563;
    }
    .input-class:focus {
        outline: none;
        border-color: #3b82f6;
    }
</style>

Blog Functional Component

Functional Components Component with 3D design, Complementary color scheme, moderate complexity for blogs, responsive with dark theme support. No JS, just HTML and Tailwind.

Open Preview

                <div class="bg-gray-100 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
    <div class="max-w-7xl mx-auto">
        <div class="text-center">
            <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white sm:text-4xl">
                From the Blog
            </h2>
            <p class="mt-3 max-w-2xl mx-auto text-xl text-gray-500 dark:text-gray-400 sm:mt-4">
                Explore our latest articles and insights.
            </p>
        </div>

        <div class="mt-12 grid gap-5 lg:grid-cols-3 lg:max-w-none">
            <div class="flex flex-col rounded-lg shadow-lg overflow-hidden transform transition-transform hover:scale-105 bg-white dark:bg-gray-800 border border-blue-500 dark:border-yellow-500">
                <div class="flex-shrink-0">
                    <img class="h-48 w-full object-cover" src="https://picsum.photos/seed/blog1/400/300" alt="">
                </div>
                <div class="flex-1 p-6 flex flex-col justify-between">
                    <div class="flex-1">
                        <p class="text-sm font-medium text-blue-600 dark:text-yellow-400">
                            <a href="#" class="hover:underline">
                                Article
                            </a>
                        </p>
                        <a href="#" class="block mt-2">
                            <p class="text-xl font-semibold text-gray-900 dark:text-white">
                                Boost your conversion rate
                            </p>
                            <p class="mt-3 text-base text-gray-500 dark:text-gray-400">
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto accusantium praesentium eius, ut atque fuga culpa, similique cum consectetur dicta...
                            </p>
                        </a>
                    </div>
                    <div class="mt-6 flex items-center">
                        <div class="flex-shrink-0">
                            <a href="#">
                                <span class="sr-only">Roel Aufderhar</span>
                                <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="">
                            </a>
                        </div>
                        <div class="ml-3">
                            <p class="text-sm font-medium text-gray-900 dark:text-white">
                                <a href="#" class="hover:underline">
                                    Roel Aufderhar
                                </a>
                            </p>
                            <div class="flex space-x-1 text-sm text-gray-500 dark:text-gray-400">
                                <time datetime="2020-03-16">Mar 16, 2020</time>
                                <span aria-hidden="true">
                                    &middot;
                                </span>
                                <span>
                                    6 min read
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="flex flex-col rounded-lg shadow-lg overflow-hidden transform transition-transform hover:scale-105 bg-white dark:bg-gray-800 border border-blue-500 dark:border-yellow-500">
                <div class="flex-shrink-0">
                    <img class="h-48 w-full object-cover" src="https://picsum.photos/seed/blog2/400/300" alt="">
                </div>
                <div class="flex-1 p-6 flex flex-col justify-between">
                    <div class="flex-1">
                        <p class="text-sm font-medium text-blue-600 dark:text-yellow-400">
                            <a href="#" class="hover:underline">
                                Video
                            </a>
                        </p>
                        <a href="#" class="block mt-2">
                            <p class="text-xl font-semibold text-gray-900 dark:text-white">
                                How to use search engine optimization to drive traffic to your site
                            </p>
                            <p class="mt-3 text-base text-gray-500 dark:text-gray-400">
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto accusantium praesentium eius, ut atque fuga culpa, similique cum consectetur dicta...
                            </p>
                        </a>
                    </div>
                    <div class="mt-6 flex items-center">
                        <div class="flex-shrink-0">
                            <a href="#">
                                <span class="sr-only">Brenna Goyette</span>
                                <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="">
                            </a>
                        </div>
                        <div class="ml-3">
                            <p class="text-sm font-medium text-gray-900 dark:text-white">
                                <a href="#" class="hover:underline">
                                    Brenna Goyette
                                </a>
                            </p>
                            <div class="flex space-x-1 text-sm text-gray-500 dark:text-gray-400">
                                <time datetime="2020-03-16">Mar 16, 2020</time>
                                <span aria-hidden="true">
                                    &middot;
                                </span>
                                <span>
                                    6 min read
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="flex flex-col rounded-lg shadow-lg overflow-hidden transform transition-transform hover:scale-105 bg-white dark:bg-gray-800 border border-blue-500 dark:border-yellow-500">
                <div class="flex-shrink-0">
                    <img class="h-48 w-full object-cover" src="https://picsum.photos/seed/blog3/400/300" alt="">
                </div>
                <div class="flex-1 p-6 flex flex-col justify-between">
                    <div class="flex-1">
                        <p class="text-sm font-medium text-blue-600 dark:text-yellow-400">
                            <a href="#" class="hover:underline">
                                Case Study
                            </a>
                        </p>
                        <a href="#" class="block mt-2">
                            <p class="text-xl font-semibold text-gray-900 dark:text-white">
                                Improve your customer experience
                            </p>
                            <p class="mt-3 text-base text-gray-500 dark:text-gray-400">
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto accusantium praesentium eius, ut atque fuga culpa, similique cum consectetur dicta...
                            </p>
                        </a>
                    </div>
                    <div class="mt-6 flex items-center">
                        <div class="flex-shrink-0">
                            <a href="#">
                                <span class="sr-only">Daniela Metz</span>
                                <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/56.jpg" alt="">
                            </a>
                        </div>
                        <div class="ml-3">
                            <p class="text-sm font-medium text-gray-900 dark:text-white">
                                <a href="#" class="hover:underline">
                                    Daniela Metz
                                </a>
                            </p>
                            <div class="flex space-x-1 text-sm text-gray-500 dark:text-gray-400">
                                <time datetime="2020-03-16">Mar 16, 2020</time>
                                <span aria-hidden="true">
                                    &middot;
                                </span>
                                <span>
                                    6 min read
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CAPTCHA Component

A simple CAPTCHA component designed with Material Design principles and a pastel color scheme for business/corporate websites.

Open Preview

                <div class="max-w-md mx-auto p-5 bg-white dark:bg-gray-800 rounded-lg shadow-md">
    <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 text-center">CAPTCHA Verification</h2>
    <div class="mt-4 flex flex-col items-center">
        <img src="https://picsum.photos/200/100" alt="CAPTCHA Image" class="w-full h-auto rounded-lg shadow">
        <div class="mt-3 flex items-center">
            <label class="text-gray-600 dark:text-gray-400 mr-2" for="captchaInput">Please type the text above:</label>
            <input type="text" id="captchaInput" class="border border-gray-300 rounded-lg p-2 dark:bg-gray-700 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400" placeholder="Enter CAPTCHA">
        </div>
        <button class="mt-4 bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg shadow-md transition duration-200 ease-in-out dark:bg-blue-700 dark:hover:bg-blue-600">Verify</button>
    </div>
</div>

Password Reset Component

Responsive Password Reset Component with Dark Mode Support

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-blue-400 to-purple-600 dark:from-gray-800 dark:to-gray-900">
  <div class="w-full max-w-md p-8 space-y-6 bg-white rounded shadow-lg dark:bg-gray-700">
    <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white">Reset Password</h2>
    <form class="space-y-4">
      <div>
        <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-200">Email Address</label>
        <input type="email" id="email" name="email" required class="w-full px-3 py-2 mt-1 border rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-600 dark:text-white dark:border-gray-500">
      </div>
      <div>
        <button type="submit" class="w-full px-4 py-2 text-white bg-blue-600 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-blue-700 dark:hover:bg-blue-800">Send Reset Link</button>
      </div>
    </form>
  </div>
</div>

Header Component

A minimalist, flat design header component for a portfolio, featuring a responsive design with dark theme support and multiple interactive elements.

Open Preview

                <header class="bg-white dark:bg-gray-800 shadow-md">
    <div class="container mx-auto px-4 py-4 flex justify-between items-center">
        <div class="flex items-center">
            <img src="https://picsum.photos/50" alt="Logo" class="h-10 w-10 rounded-full">
            <h1 class="ml-3 text-gray-800 dark:text-white text-xl font-bold">My Portfolio</h1>
        </div>
        <nav class="hidden md:flex space-x-8">
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Home</a>
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">About</a>
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Projects</a>
            <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Contact</a>
        </nav>
        <div class="relative md:hidden">
            <button class="text-gray-600 dark:text-gray-300 focus:outline-none">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
                </svg>
            </button>
        </div>
    </div>
</header>
<div class="block md:hidden bg-gray-100 dark:bg-gray-700">
    <div class="container mx-auto px-4 py-2">
        <div class="flex flex-col space-y-2">
            <a href="#" class="block text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Home</a>
            <a href="#" class="block text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">About</a>
            <a href="#" class="block text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Projects</a>
            <a href="#" class="block text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Contact</a>
        </div>
    </div>
</div>

1 ... 234 235 236 237 238 ... 335