Search Components

All Components

Browse all available Tailwind CSS components

Social Media Timeline Component

A simple, responsive timeline component for social media, designed with Material Design principles. It uses earth tones and includes dark mode support. Each timeline item displays a user avatar, name, a post title, and a placeholder image, typical for social media feeds.

Open Preview

                <div class="min-h-screen bg-stone-100 dark:bg-stone-900 p-8">
  <div class="container mx-auto max-w-2xl">
    <h1 class="text-4xl font-bold text-stone-800 dark:text-stone-200 mb-8 text-center">Social Feed Timeline</h1>

    <!-- Timeline Item 1 -->
    <div class="relative mb-8 last:mb-0">
      <div class="hidden md:block absolute left-1/2 -ml-px w-0.5 h-full bg-stone-300 dark:bg-stone-700"></div>

      <div class="relative flex items-center justify-between md:justify-center md:even:flex-row-reverse">
        <div class="w-10 h-10 rounded-full bg-stone-500 dark:bg-stone-600 flex items-center justify-center relative z-10 md:absolute md:left-1/2 md:-ml-5">
          <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="rounded-full w-9 h-9 border-2 border-white dark:border-stone-900">
        </div>
        <div class="w-full md:w-5/12 bg-white dark:bg-stone-800 rounded-lg shadow-md p-6 md:p-8 ml-4 md:ml-0 md:mr-auto md:even:ml-auto md:even:mr-0">
          <h3 class="text-xl font-semibold text-stone-800 dark:text-stone-200 mb-2">John Doe posted an update</h3>
          <p class="text-stone-600 dark:text-stone-400 mb-4">Exploring the beautiful trails today! #nature #hiking</p>
          <img src="https://picsum.photos/600/400?random=1" alt="Post Image" class="rounded-md w-full h-auto object-cover">
          <div class="text-sm text-stone-500 dark:text-stone-500 mt-4">2 hours ago</div>
        </div>
      </div>
    </div>

    <!-- Timeline Item 2 -->
    <div class="relative mb-8 last:mb-0">
      <div class="hidden md:block absolute left-1/2 -ml-px w-0.5 h-full bg-stone-300 dark:bg-stone-700"></div>
      <div class="relative flex items-center justify-between md:justify-center md:even:flex-row-reverse">
        <div class="w-10 h-10 rounded-full bg-stone-500 dark:bg-stone-600 flex items-center justify-center relative z-10 md:absolute md:left-1/2 md:-ml-5">
          <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar" class="rounded-full w-9 h-9 border-2 border-white dark:border-stone-900">
        </div>
        <div class="w-full md:w-5/12 bg-white dark:bg-stone-800 rounded-lg shadow-md p-6 md:p-8 ml-4 md:ml-0 md:mr-auto md:even:ml-auto md:even:mr-0">
          <h3 class="text-xl font-semibold text-stone-800 dark:text-stone-200 mb-2">Jane Smith shared a new recipe</h3>
          <p class="text-stone-600 dark:text-stone-400 mb-4">Delighted with this new homemade bread recipe! So satisfying. #baking #foodie</p>
          <img src="https://picsum.photos/600/400?random=2" alt="Post Image" class="rounded-md w-full h-auto object-cover">
          <div class="text-sm text-stone-500 dark:text-stone-500 mt-4">5 hours ago</div>
        </div>
      </div>
    </div>

    <!-- Timeline Item 3 -->
    <div class="relative mb-8 last:mb-0">
      <div class="hidden md:block absolute left-1/2 -ml-px w-0.5 h-full bg-stone-300 dark:bg-stone-700"></div>
      <div class="relative flex items-center justify-between md:justify-center md:even:flex-row-reverse">
        <div class="w-10 h-10 rounded-full bg-stone-500 dark:bg-stone-600 flex items-center justify-center relative z-10 md:absolute md:left-1/2 md:-ml-5">
          <img src="https://randomuser.me/api/portraits/men/22.jpg" alt="Avatar" class="rounded-full w-9 h-9 border-2 border-white dark:border-stone-900">
        </div>
        <div class="w-full md:w-5/12 bg-white dark:bg-stone-800 rounded-lg shadow-md p-6 md:p-8 ml-4 md:ml-0 md:mr-auto md:even:ml-auto md:even:mr-0">
          <h3 class="text-xl font-semibold text-stone-800 dark:text-stone-200 mb-2">Mike Johnson attended an event</h3>
          <p class="text-stone-600 dark:text-stone-400 mb-4">Great time at the local tech meetup! Learned a lot. #tech #community</p>
          <img src="https://picsum.photos/600/400?random=3" alt="Post Image" class="rounded-md w-full h-auto object-cover">
          <div class="text-sm text-stone-500 dark:text-stone-500 mt-4">1 day ago</div>
        </div>
      </div>
    </div>

  </div>
</div>

Wishlist Component

A Neumorphism-styled Wishlist Component for social media, with a complementary color scheme. It includes a responsive design using Tailwind CSS with dark mode support. Only HTML and Tailwind classes are used, with no JavaScript. Images are sourced from picsum.photos and avatars from randomuser.me.

Open Preview

                <div class="min-h-screen bg-gray-200 dark:bg-gray-900 p-8 flex flex-col items-center justify-center">

  <!-- Wishlist Container -->
  <div class="w-full max-w-4xl bg-gray-200 dark:bg-gray-800 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark p-8 md:p-12 transition-all duration-300">

    <h1 class="text-3xl md:text-4xl font-bold text-gray-800 dark:text-gray-100 mb-8 text-center">My Social Wishlist</h1>

    <!-- Wishlist Item 1 -->
    <div class="flex flex-col md:flex-row items-center bg-gray-100 dark:bg-gray-700 rounded-lg shadow-neumorphic-inner-light dark:shadow-neumorphic-inner-dark p-6 mb-6 transition-all duration-300">
      <img src="https://picsum.photos/seed/wish1/150/150" alt="Product Image" class="w-24 h-24 md:w-32 md:h-32 rounded-lg object-cover shadow-neumorphic-light dark:shadow-neumorphic-dark flex-shrink-0 mb-4 md:mb-0 md:mr-6">
      <div class="flex-grow text-center md:text-left">
        <h2 class="text-xl md:text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Wireless Noise-Cancelling Headphones</h2>
        <p class="text-gray-600 dark:text-gray-300 mb-3 text-sm md:text-base">Experience immersive audio with these premium headphones, perfect for travel and focus.</p>
        <div class="flex items-center justify-center md:justify-start space-x-2">
          <span class="text-lg font-bold text-indigo-600 dark:text-teal-400">$299.99</span>
          <span class="text-sm text-gray-500 dark:text-gray-400 line-through">$349.99</span>
        </div>
        <div class="flex flex-wrap justify-center md:justify-start gap-2 mt-4">
          <button class="bg-indigo-500 hover:bg-indigo-600 dark:bg-teal-600 dark:hover:bg-teal-700 text-white font-semibold py-2 px-4 rounded-full shadow-neumorphic-btn-light dark:shadow-neumorphic-btn-dark transition-all duration-300 transform hover:scale-105 active:shadow-neumorphic-btn-pressed-light active:dark:shadow-neumorphic-btn-pressed-dark text-sm">
            Add to Cart
          </button>
          <button class="bg-gray-300 hover:bg-gray-400 dark:bg-gray-600 dark:hover:bg-gray-500 text-gray-800 dark:text-gray-100 font-semibold py-2 px-4 rounded-full shadow-neumorphic-btn-light dark:shadow-neumorphic-btn-dark transition-all duration-300 transform hover:scale-105 active:shadow-neumorphic-btn-pressed-light active:dark:shadow-neumorphic-btn-pressed-dark text-sm">
            Share
          </button>
          <button class="bg-red-500 hover:bg-red-600 dark:bg-red-700 dark:hover:bg-red-800 text-white font-semibold py-2 px-4 rounded-full shadow-neumorphic-btn-light dark:shadow-neumorphic-btn-dark transition-all duration-300 transform hover:scale-105 active:shadow-neumorphic-btn-pressed-light active:dark:shadow-neumorphic-btn-pressed-dark text-sm">
            Remove
          </button>
        </div>
      </div>
    </div>

    <!-- Wishlist Item 2 -->
    <div class="flex flex-col md:flex-row items-center bg-gray-100 dark:bg-gray-700 rounded-lg shadow-neumorphic-inner-light dark:shadow-neumorphic-inner-dark p-6 mb-6 transition-all duration-300">
      <img src="https://picsum.photos/seed/wish2/150/150" alt="Product Image" class="w-24 h-24 md:w-32 md:h-32 rounded-lg object-cover shadow-neumorphic-light dark:shadow-neumorphic-dark flex-shrink-0 mb-4 md:mb-0 md:mr-6">
      <div class="flex-grow text-center md:text-left">
        <h2 class="text-xl md:text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Smartwatch with Health Monitoring</h2>
        <p class="text-gray-600 dark:text-gray-300 mb-3 text-sm md:text-base">Track your fitness, monitor health metrics, and stay connected on the go.</p>
        <div class="flex items-center justify-center md:justify-start space-x-2">
          <span class="text-lg font-bold text-indigo-600 dark:text-teal-400">$199.00</span>
          <span class="text-sm text-gray-500 dark:text-gray-400 line-through">$229.00</span>
        </div>
        <div class="flex flex-wrap justify-center md:justify-start gap-2 mt-4">
          <button class="bg-indigo-500 hover:bg-indigo-600 dark:bg-teal-600 dark:hover:bg-teal-700 text-white font-semibold py-2 px-4 rounded-full shadow-neumorphic-btn-light dark:shadow-neumorphic-btn-dark transition-all duration-300 transform hover:scale-105 active:shadow-neumorphic-btn-pressed-light active:dark:shadow-neumorphic-btn-pressed-dark text-sm">
            Add to Cart
          </button>
          <button class="bg-gray-300 hover:bg-gray-400 dark:bg-gray-600 dark:hover:bg-gray-500 text-gray-800 dark:text-gray-100 font-semibold py-2 px-4 rounded-full shadow-neumorphic-btn-light dark:shadow-neumorphic-btn-dark transition-all duration-300 transform hover:scale-105 active:shadow-neumorphic-btn-pressed-light active:dark:shadow-neumorphic-btn-pressed-dark text-sm">
            Share
          </button>
          <button class="bg-red-500 hover:bg-red-600 dark:bg-red-700 dark:hover:bg-red-800 text-white font-semibold py-2 px-4 rounded-full shadow-neumorphic-btn-light dark:shadow-neumorphic-btn-dark transition-all duration-300 transform hover:scale-105 active:shadow-neumorphic-btn-pressed-light active:dark:shadow-neumorphic-btn-pressed-dark text-sm">
            Remove
          </button>
        </div>
      </div>
    </div>

    <!-- Social Sharing Section -->
    <div class="mt-8 pt-8 border-t border-gray-300 dark:border-gray-700 text-center">
      <h3 class="text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-4">Share Your Wishlist</h3>
      <div class="flex justify-center flex-wrap gap-4">
        <button class="bg-blue-500 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 text-white font-semibold py-3 px-6 rounded-full shadow-neumorphic-btn-light dark:shadow-neumorphic-btn-dark transition-all duration-300 transform hover:scale-105 active:shadow-neumorphic-btn-pressed-light active:dark:shadow-neumorphic-btn-pressed-dark text-lg">
          <i class="fab fa-facebook-f mr-2"></i> Facebook
        </button>
        <button class="bg-blue-400 hover:bg-blue-500 dark:bg-blue-600 dark:hover:bg-blue-700 text-white font-semibold py-3 px-6 rounded-full shadow-neumorphic-btn-light dark:shadow-neumorphic-btn-dark transition-all duration-300 transform hover:scale-105 active:shadow-neumorphic-btn-pressed-light active:dark:shadow-neumorphic-btn-pressed-dark text-lg">
          <i class="fab fa-twitter mr-2"></i> Twitter
        </button>
        <button class="bg-purple-600 hover:bg-purple-700 dark:bg-purple-700 dark:hover:bg-purple-800 text-white font-semibold py-3 px-6 rounded-full shadow-neumorphic-btn-light dark:shadow-neumorphic-btn-dark transition-all duration-300 transform hover:scale-105 active:shadow-neumorphic-btn-pressed-light active:dark:shadow-neumorphic-btn-pressed-dark text-lg">
          <i class="fab fa-instagram mr-2"></i> Instagram
        </button>
      </div>
    </div>

  </div>

  <!-- You might also like section (Example of complex elements) -->
  <div class="w-full max-w-4xl mt-12 bg-gray-200 dark:bg-gray-800 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark p-8 md:p-12 transition-all duration-300">
    <h3 class="text-2xl md:text-3xl font-bold text-gray-800 dark:text-gray-100 mb-6 text-center">You Might Also Like</h3>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

      <!-- Recommended Item 1 -->
      <div class="bg-gray-100 dark:bg-gray-700 rounded-lg shadow-neumorphic-inner-light dark:shadow-neumorphic-inner-dark p-4 text-center transition-all duration-300">
        <img src="https://picsum.photos/seed/rec1/120/120" alt="Recommended Product" class="w-24 h-24 rounded-full object-cover mx-auto mb-4 shadow-neumorphic-light dark:shadow-neumorphic-dark">
        <h4 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-1">Ergonomic Office Chair</h4>
        <p class="text-gray-600 dark:text-gray-300 text-sm mb-3">$450.00</p>
        <button class="bg-indigo-500 hover:bg-indigo-600 dark:bg-teal-600 dark:hover:bg-teal-700 text-white font-semibold py-2 px-4 rounded-full shadow-neumorphic-btn-light dark:shadow-neumorphic-btn-dark text-sm transition-all duration-300 transform hover:scale-105 active:shadow-neumorphic-btn-pressed-light active:dark:shadow-neumorphic-btn-pressed-dark">
          View Item
        </button>
      </div>

      <!-- Recommended Item 2 -->
      <div class="bg-gray-100 dark:bg-gray-700 rounded-lg shadow-neumorphic-inner-light dark:shadow-neumorphic-inner-dark p-4 text-center transition-all duration-300">
        <img src="https://picsum.photos/seed/rec2/120/120" alt="Recommended Product" class="w-24 h-24 rounded-full object-cover mx-auto mb-4 shadow-neumorphic-light dark:shadow-neumorphic-dark">
        <h4 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-1">Premium Coffee Machine</h4>
        <p class="text-gray-600 dark:text-gray-300 text-sm mb-3">$150.00</p>
        <button class="bg-indigo-500 hover:bg-indigo-600 dark:bg-teal-600 dark:hover:bg-teal-700 text-white font-semibold py-2 px-4 rounded-full shadow-neumorphic-btn-light dark:shadow-neumorphic-btn-dark text-sm transition-all duration-300 transform hover:scale-105 active:shadow-neumorphic-btn-pressed-light active:dark:shadow-neumorphic-btn-pressed-dark">
          View Item
        </button>
      </div>

      <!-- Recommended Item 3 -->
      <div class="bg-gray-100 dark:bg-gray-700 rounded-lg shadow-neumorphic-inner-light dark:shadow-neumorphic-inner-dark p-4 text-center transition-all duration-300">
        <img src="https://picsum.photos/seed/rec3/120/120" alt="Recommended Product" class="w-24 h-24 rounded-full object-cover mx-auto mb-4 shadow-neumorphic-light dark:shadow-neumorphic-dark">
        <h4 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-1">Smart Home Hub</h4>
        <p class="text-gray-600 dark:text-gray-300 text-sm mb-3">$120.00</p>
        <button class="bg-indigo-500 hover:bg-indigo-600 dark:bg-teal-600 dark:hover:bg-teal-700 text-white font-semibold py-2 px-4 rounded-full shadow-neumorphic-btn-light dark:shadow-neumorphic-btn-dark text-sm transition-all duration-300 transform hover:scale-105 active:shadow-neumorphic-btn-pressed-light active:dark:shadow-neumorphic-btn-pressed-dark">
          View Item
        </button>
      </div>

    </div>
  </div>

  <!-- Friends

Pagination Component

A simple and elegant dark mode pagination component with pastel colors, suitable for social media applications. It features a responsive design and uses Tailwind CSS for styling, including dark mode support.

Open Preview

                <nav class="flex items-center justify-between px-4 py-3 sm:px-6 bg-gray-900 rounded-md"> <div class="flex-1 flex justify-between sm:hidden"> <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-700 text-sm font-medium rounded-md text-gray-300 bg-gray-800 hover:bg-gray-700"> Previous </a> <a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-700 text-sm font-medium rounded-md text-gray-300 bg-gray-800 hover:bg-gray-700"> Next </a> </div> <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between"> <div> <p class="text-sm text-gray-400"> Showing <span class="font-medium">1</span> to <span class="font-medium">10</span> of <span class="font-medium">97</span> results </p> </div> <div> <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination"> <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-700 bg-gray-800 text-sm font-medium text-gray-300 hover:bg-gray-700"> <span class="sr-only">Previous</span> <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" /> </svg> </a> <a href="#" aria-current="page" class="z-10 bg-indigo-500 border-indigo-500 text-white relative inline-flex items-center px-4 py-2 border text-sm font-medium"> 1 </a> <a href="#" class="bg-gray-800 border-gray-700 text-gray-300 hover:bg-gray-700 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> 2 </a> <a href="#" class="bg-gray-800 border-gray-700 text-gray-300 hover:bg-gray-700 hidden md:inline-flex relative items-center px-4 py-2 border text-sm font-medium"> 3 </a> <span class="relative inline-flex items-center px-4 py-2 border border-gray-700 bg-gray-800 text-sm font-medium text-gray-400"> ... </span> <a href="#" class="bg-gray-800 border-gray-700 text-gray-300 hover:bg-gray-700 hidden md:inline-flex relative items-center px-4 py-2 border text-sm font-medium"> 8 </a> <a href="#" class="bg-gray-800 border-gray-700 text-gray-300 hover:bg-gray-700 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> 9 </a> <a href="#" class="bg-gray-800 border-gray-700 text-gray-300 hover:bg-gray-700 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> 10 </a> <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-700 bg-gray-800 text-sm font-medium text-gray-300 hover:bg-gray-700"> <span class="sr-only">Next</span> <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10l-3.293-3.293a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" /> </svg> </a> </nav> </div> </div> </nav>

RetroBusinessLayout

A retro/vintage-themed layout component for business websites, featuring a grayscale color scheme and simple design. It is responsive and includes dark mode support.

Open Preview

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col items-center justify-center font-mono text-gray-800 dark:text-gray-200 p-4">

  <!-- Header -->
  <header class="w-full max-w-4xl bg-white dark:bg-gray-800 shadow-md rounded-lg p-6 mb-8 flex justify-between items-center transform transition duration-300 hover:scale-105">
    <h1 class="text-3xl font-bold uppercase tracking-wider">Acme Corp</h1>
    <nav>
      <ul class="flex space-x-6">
        <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300">About</a></li>
        <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300">Services</a></li>
        <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300">Contact</a></li>
      </ul>
    </nav>
  </header>

  <!-- Main Content -->
  <main class="w-full max-w-4xl bg-white dark:bg-gray-800 shadow-md rounded-lg p-8 transform transition duration-300 hover:scale-105">
    <section class="text-center mb-10">
      <h2 class="text-4xl font-bold mb-4 uppercase">Welcome to the Future Past</h2>
      <p class="text-lg leading-relaxed">Crafting innovative solutions with a nod to the timeless aesthetics of yesteryear. We bring your business visions to life with robust technology and classic design principles.</p>
    </section>

    <section class="grid md:grid-cols-2 gap-8">
      <div class="bg-gray-50 dark:bg-gray-700 p-6 rounded-lg shadow-inner transform transition duration-300 hover:translate-y-[-5px]">
        <h3 class="text-2xl font-semibold mb-3">Our Mission</h3>
        <p class="text-gray-700 dark:text-gray-300">To fuse nostalgic design sensibilities with modern technological advancements, delivering unparalleled digital experiences that stand the test of time.</p>
      </div>
      <div class="bg-gray-50 dark:bg-gray-700 p-6 rounded-lg shadow-inner transform transition duration-300 hover:translate-y-[-5px]">
        <h3 class="text-2xl font-semibold mb-3">What We Offer</h3>
        <ul class="list-disc list-inside text-gray-700 dark:text-gray-300">
          <li>Web Development (Retro & Modern)</li>
          <li>Digital Marketing Strategies</li>
          <li>Brand Identity & Design</li>
          <li>IT Consulting & Solutions</li>
        </ul>
      </div>
    </section>
  </main>

  <!-- Footer -->
  <footer class="w-full max-w-4xl bg-white dark:bg-gray-800 shadow-md rounded-lg p-6 mt-8 text-center text-gray-600 dark:text-gray-300 transform transition duration-300 hover:scale-105">
    <p>&copy; 2023 Acme Corp. All rights reserved. Embracing the past, building the future.</p>
  </footer>

</div>

Password Reset Component - Retro/Vibrant Dashboard

A retro-vintage styled password reset component with vibrant colors, suitable for a dashboard. It features a responsive design and dark theme support using Tailwind CSS. The design evokes 80s/90s aesthetics.

Open Preview

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-6">
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-8 max-w-md w-full border-4 border-purple-500 dark:border-teal-400 transform -rotate-3 hover:rotate-0 transition-transform duration-300">
    <div class="text-center mb-8">
      <h2 class="text-4xl font-bold text-gray-800 dark:text-white font-mono mb-2">RESET <span class="text-purple-600 dark:text-teal-400">PASSWORD</span></h2>
      <p class="text-gray-600 dark:text-gray-300 text-sm">Enter your email to receive a password reset link.</p>
    </div>
    <form>
      <div class="mb-6">
        <label for="email" class="block text-gray-700 dark:text-gray-200 text-sm font-bold mb-2 uppercase tracking-wider">Email Address</label>
        <input type="email" id="email" class="shadow appearance-none border-4 border-yellow-400 dark:border-rose-500 rounded-lg w-full py-3 px-4 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-teal-600 bg-gray-200 dark:bg-gray-700 placeholder-gray-500 dark:placeholder-gray-400 transition-all duration-300" placeholder="[email protected]">
      </div>
      <div class="flex items-center justify-between">
        <button type="submit" class="bg-gradient-to-r from-purple-600 to-pink-500 hover:from-purple-700 hover:to-pink-600 text-white font-extrabold py-3 px-6 rounded-full focus:outline-none focus:shadow-outline transform skew-x-12 hover:skew-x-0 transition-all duration-300 text-lg uppercase tracking-widest">
          Send Link
        </button>
        <a href="#" class="inline-block align-baseline font-bold text-sm text-purple-600 dark:text-teal-400 hover:text-purple-800 dark:hover:text-teal-200 transition-colors duration-300">
          Remembered your password?
        </a>
      </div>
    </form>
    <div class="mt-8 text-center text-gray-500 dark:text-gray-400 text-xs">
      <p>&copy;2023 RETRO CORP. All rights reserved. <span class="text-pink-500 dark:text-yellow-300">Stay Awesome!</span></p>
    </div>
  </div>
</div>

Buttons Component

A retro-vintage themed button component with triadic color scheme, simple complexity, and responsive design with dark mode support, suitable for a blog or content website.

Open Preview

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">

  <!-- Retro Button 1 -->
  <button class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-full m-2
                 transform transition duration-300 hover:scale-105
                 dark:bg-red-700 dark:hover:bg-red-900">
    Click Me (Red)
  </button>

  <!-- Retro Button 2 -->
  <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full m-2
                 transform transition duration-300 hover:scale-105
                 dark:bg-blue-700 dark:hover:bg-blue-900">
    Click Me (Blue)
  </button>

  <!-- Retro Button 3 -->
  <button class="bg-yellow-500 hover:bg-yellow-700 text-white font-bold py-2 px-4 rounded-full m-2
                 transform transition duration-300 hover:scale-105
                 dark:bg-yellow-700 dark:hover:bg-yellow-900">
    Click Me (Yellow)
  </button>

  <!-- Responsive Example: Buttons stack on small screens and are side-by-side on larger screens -->
  <div class="flex flex-col sm:flex-row mt-8">
    <button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded m-2
                   dark:bg-green-700 dark:hover:bg-green-900">
      Responsive Button 1
    </button>
    <button class="bg-purple-500 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded m-2
                   dark:bg-purple-700 dark:hover:bg-purple-900">
      Responsive Button 2
    </button>
  </div>

  <!-- Dark Mode Toggle Placeholder (for visual representation, no JS) -->
  <div class="mt-8 text-gray-700 dark:text-gray-300">
    Toggle your browser/OS dark mode to see changes.
  </div>

</div>

Video Player Component

A Glassmorphism-styled video player with frosted glass-like translucent elements, pastel color scheme, and a complex interface suitable for business/corporate websites. It supports responsive design and a dark theme using Tailwind CSS, with no JavaScript.

Open Preview

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4">
  <div class="relative w-full max-w-4xl bg-white bg-opacity-30 dark:bg-gray-800 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-2xl shadow-xl overflow-hidden border border-white border-opacity-20 dark:border-gray-700 dark:border-opacity-20">
    <!-- Video Player Header -->
    <div class="p-4 bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 border-b border-white border-opacity-30 dark:border-gray-600 dark:border-opacity-30 flex items-center justify-between">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-white">Corporate Presentation</h2>
      <div class="flex space-x-2">
        <button class="p-2 rounded-full bg-white bg-opacity-50 dark:bg-gray-600 dark:bg-opacity-50 text-gray-700 dark:text-white hover:bg-opacity-70 dark:hover:bg-opacity-70 transition-colors">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
          </svg>
        </button>
        <button class="p-2 rounded-full bg-white bg-opacity-50 dark:bg-gray-600 dark:bg-opacity-50 text-gray-700 dark:text-white hover:bg-opacity-70 dark:hover:bg-opacity-70 transition-colors">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
            <path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd" />
          </svg>
        </button>
        <button class="p-2 rounded-full bg-white bg-opacity-50 dark:bg-gray-600 dark:bg-opacity-50 text-gray-700 dark:text-white hover:bg-opacity-70 dark:hover:bg-opacity-70 transition-colors">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
          </svg>
        </button>
      </div>
    </div>

    <!-- Main Video Area -->
    <div class="aspect-w-16 aspect-h-9 w-full bg-black relative">
      <img src="https://picsum.photos/seed/picsum/1280/720" alt="Video Thumbnail" class="absolute inset-0 w-full h-full object-cover">
      <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-40 dark:bg-opacity-60">
        <button class="p-4 rounded-full bg-white bg-opacity-60 dark:bg-gray-700 dark:bg-opacity-60 text-gray-800 dark:text-white hover:scale-110 transition-transform transform shadow-lg">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
          </svg>
        </button>
      </div>
    </div>

    <!-- Video Controls -->
    <div class="p-4 bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 border-t border-white border-opacity-30 dark:border-gray-600 dark:border-opacity-30 flex items-center justify-between flex-wrap">
      <div class="flex items-center space-x-4 mb-2 sm:mb-0 w-full sm:w-auto">
        <button class="p-2 rounded-full bg-white bg-opacity-50 dark:bg-gray-600 dark:bg-opacity-50 text-gray-700 dark:text-white hover:bg-opacity-70 dark:hover:bg-opacity-70 transition-colors">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
          </svg>
        </button>
        <span class="text-gray-800 dark:text-white text-sm">0:00 / 5:30</span>
      </div>
      <div class="flex-grow mx-4 mb-2 sm:mb-0">
        <div class="h-2 rounded-full bg-white bg-opacity-50 dark:bg-gray-600 dark:bg-opacity-50">
          <div class="h-full w-1/3 bg-pink-300 dark:bg-pink-400 rounded-full"></div>
        </div>
      </div>
      <div class="flex items-center space-x-2 w-full sm:w-auto justify-end">
        <button class="p-2 rounded-full bg-white bg-opacity-50 dark:bg-gray-600 dark:bg-opacity-50 text-gray-700 dark:text-white hover:bg-opacity-70 dark:hover:bg-opacity-70 transition-colors hidden sm:block">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path d="M11 5a2 2 0 11-4 0 2 2 0 014 0zM10 3a1 1 0 100 2 1 1 0 000-2zm0 13a1 1 0 100 2 1 1 0 000-2z" />
            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zM5.5 8.5C5.224 8.5 5 8.276 5 8s.224-.5.5-.5.5.224.5.5-.224.5-.5.5zM14.5 8.5C14.224 8.5 14 8.276 14 8s.224-.5.5-.5.5.224.5.5-.224.5-.5.5z" clip-rule="evenodd" />
          </svg>
        </button>
        <button class="p-2 rounded-full bg-white bg-opacity-50 dark:bg-gray-600 dark:bg-opacity-50 text-gray-700 dark:text-white hover:bg-opacity-70 dark:hover:bg-opacity-70 transition-colors">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd" />
          </svg>
        </button>
        <button class="p-2 rounded-full bg-white bg-opacity-50 dark:bg-gray-600 dark:bg-opacity-50 text-gray-700 dark:text-white hover:bg-opacity-70 dark:hover:bg-opacity-70 transition-colors">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M3 5a2 2 0 012-2h10a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2V5zm1.48 8.163a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75h-.01a.75.75 0 01-.75-.75v-.01zm4.717 0a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75h-.01a.75.75 0 01-.75-.75v-.01zm4.717 0a.75.75 0 01.75-.75h.01a.75.75 0 01.75.75v.01a.75.75 0 01-.75.75h-.01a.75.75 0 01-.75-.75v-.01z" clip-rule="evenodd" />
          </svg>
        </button>
      </div>
    </div>

    <!-- Related Videos / Playlist (Example) -->
    <div class="p-4 bg-white bg-opacity-30 dark:bg-gray-800 dark:bg-opacity-30 backdrop-filter backdrop-blur-md rounded-b-2xl border-t border-white border-opacity-20 dark:border-gray-700 dark:border-opacity-20 hidden md:block">
      <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-3">Next Up</h3>
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        <!-- Related Video Item -->
        <div class="flex items-center space-x-3 bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 rounded-lg p-3 shadow-sm hover:bg-opacity-60 dark:hover:bg-opacity-60 transition-colors">
          <img src="https://picsum.photos/seed/related1/80/45" alt="Related Video" class="rounded w-20 h-auto object-cover">
          <div>
            <p class="text-sm font-medium text-gray-800 dark:text-white">Future of Business AI</p>
            <p class="text-xs text-gray-600 dark:text-gray-300">John Doe • 12K views</p>
          </div>
        </div>
        <div class="flex items-center space-x-3 bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 rounded-lg p-3 shadow-sm hover:bg-opacity-60 dark:hover:bg-opacity-60 transition-colors">
          <img src="https://picsum.photos/seed/related2/80/45" alt="Related Video" class="rounded w-20 h-auto object-cover">
          <div>
            <p class="text-sm font-medium text-gray-800 dark:text-white">Marketing Strategies 2024</p>
            <p class="text-xs text-gray-600 dark:text-gray-300">Jane Smith • 8K views</p>
          </div>
        </div>
        <div class="flex items-center space-x-3 bg-white bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 rounded-lg p-3 shadow-sm hover:bg-opacity-60 dark:hover:bg-opacity-60 transition-colors">
          <img src="https://picsum.photos/seed/related3/80/45" alt="Related Video" class="rounded w-20 h-auto object-cover">
          <div>
            <p class="text-sm font-medium text-gray-800 dark:text-white">Team Collaboration Tools</p>
            <p class="text-xs text-gray-600 dark:text-gray-300">Mike Johnson • 5K views</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Shopping Cart Component

A retro/vintage style shopping cart component with grayscale color scheme, moderate complexity, and responsive design with dark theme support. Designed for business/corporate websites using Tailwind CSS. No JavaScript, only HTML with Tailwind classes. Uses picsum.photos for images and randomuser.me for avatars.

Open Preview

                <div class="antialiased dark:bg-gray-900 dark:text-gray-200">
  <div class="h-full bg-gray-100 dark:bg-gray-800 p-8">
    <div class="mx-auto max-w-3xl">
      <header class="flex items-center justify-between">
        <h1 class="text-2xl font-bold text-gray-800 dark:text-white">Your Cart</h1>
        <a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300">Continue Shopping</a>
      </header>

      <div class="mt-8">
        <ul class="space-y-4">
          <li class="flex items-center rounded-lg border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-700">
            <img src="https://picsum.photos/seed/product1/80/80" alt="Nike Air Force 1" class="h-20 w-20 rounded-lg object-cover mr-4">
            <div class="flex-grow">
              <h3 class="text-base font-semibold text-gray-900 dark:text-white">Nike Air Force 1</h3>
              <p class="text-sm text-gray-500 dark:text-gray-300">Size: 10</p>
              <p class="text-sm text-gray-500 dark:text-gray-300">Color: White</p>
              <div class="mt-2 flex items-center justify-between">
                <span class="text-base font-bold text-gray-900 dark:text-white">$120.00</span>
                <div class="flex items-center">
                  <button type="button" class="inline-flex h-7 w-7 items-center justify-center rounded-full border border-gray-200 bg-white text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">-</button>
                  <input type="text" class="w-10 border-0 bg-transparent text-center text-sm font-medium text-gray-900 dark:text-white" value="1" readonly>
                  <button type="button" class="inline-flex h-7 w-7 items-center justify-center rounded-full border border-gray-200 bg-white text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">+</button>
                </div>
              </div>
            </div>
            <button class="ml-4 text-red-600 hover:text-red-500 dark:text-red-400 dark:hover:text-red-300">
              <svg class="h-5 w-5" 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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
            </button>
          </li>
          <li class="flex items-center rounded-lg border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-700">
            <img src="https://picsum.photos/seed/product2/80/80" alt="Apple Watch Series 7" class="h-20 w-20 rounded-lg object-cover mr-4">
            <div class="flex-grow">
              <h3 class="text-base font-semibold text-gray-900 dark:text-white">Apple Watch Series 7</h3>
              <p class="text-sm text-gray-500 dark:text-gray-300">Color: Space Gray</p>
              <p class="text-sm text-gray-500 dark:text-gray-300">Band: Solo Loop</p>
              <div class="mt-2 flex items-center justify-between">
                <span class="text-base font-bold text-gray-900 dark:text-white">$399.00</span>
                <div class="flex items-center">
                  <button type="button" class="inline-flex h-7 w-7 items-center justify-center rounded-full border border-gray-200 bg-white text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">-</button>
                  <input type="text" class="w-10 border-0 bg-transparent text-center text-sm font-medium text-gray-900 dark:text-white" value="1" readonly>
                  <button type="button" class="inline-flex h-7 w-7 items-center justify-center rounded-full border border-gray-200 bg-white text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">+</button>
                </div>
              </div>
            </div>
            <button class="ml-4 text-red-600 hover:text-red-500 dark:text-red-400 dark:hover:text-red-300">
              <svg class="h-5 w-5" 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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
            </button>
          </li>
        </ul>
      </div>

      <div class="mt-8 rounded-lg border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-700">
        <div class="flex items-center justify-between">
          <p class="text-base font-semibold text-gray-900 dark:text-white">Subtotal</p>
          <p class="text-base font-semibold text-gray-900 dark:text-white">$519.00</p>
        </div>
        <div class="mt-2 flex items-center justify-between">
          <p class="text-base font-semibold text-gray-900 dark:text-white">Shipping</p>
          <p class="text-base font-semibold text-gray-900 dark:text-white">Free</p>
        </div>
        <div class="mt-4 flex items-center justify-between border-t border-gray-200 pt-4 dark:border-gray-600">
          <p class="text-xl font-bold text-gray-900 dark:text-white">Total</p>
          <p class="text-xl font-bold text-gray-900 dark:text-white">$519.00</p>
        </div>
      </div>

      <div class="mt-8 flex justify-end">
        <button type="button" class="rounded-lg bg-gray-900 px-5 py-2.5 text-sm font-medium text-white hover:bg-gray-800 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800">Proceed to Checkout</button>
      </div>
    </div>
  </div>
</div>

Gallery Component

A responsive gallery component with Glassmorphism design, analogous color scheme, complex layout, and dark theme support for e-commerce.

Open Preview

                <div class="bg-gradient-to-br from-purple-100 via-purple-200 to-pink-100 dark:from-gray-900 dark:via-purple-900 dark:to-pink-900 min-h-screen p-8">
  <div class="container mx-auto">
    <h1 class="text-4xl font-bold text-center text-purple-800 dark:text-purple-300 mb-12 drop-shadow-lg">Product Gallery</h1>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      <!-- Product Card 1 -->
      <div class="bg-white bg-opacity-30 dark:bg-gray-800 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-xl shadow-2xl overflow-hidden transform transition-all duration-500 hover:scale-105 group relative">
        <div class="p-6 relative z-10">
          <img src="https://picsum.photos/id/237/400/300" alt="Product Image" class="w-full h-48 object-cover rounded-lg mb-4 shadow-md group-hover:shadow-xl transition-shadow duration-300">
          <h2 class="text-2xl font-semibold text-purple-900 dark:text-purple-200 mb-2">Product Title 1</h2>
          <p class="text-purple-800 dark:text-purple-300 text-lg mb-4">A short description of the product, highlighting its key features.</p>
          <div class="flex justify-between items-center mb-4">
            <span class="text-3xl font-bold text-purple-900 dark:text-purple-100">$99.99</span>
            <span class="text-sm text-purple-700 dark:text-purple-300 line-through">$120.00</span>
          </div>
          <div class="flex space-x-2 text-purple-700 dark:text-purple-300 mb-4">
            <span class="text-yellow-400">★</span>
            <span class="text-yellow-400">★</span>
            <span class="text-yellow-400">★</span>
            <span class="text-yellow-400">★</span>
            <span class="text-gray-400">★</span>
            <span>(4.5 stars)</span>
          </div>
          <button class="w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-6 rounded-lg transition-colors duration-300 shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-75">Add to Cart</button>
        </div>
        <div class="absolute inset-0 bg-gradient-to-br from-purple-400 to-pink-400 opacity-20 group-hover:opacity-40 transition-opacity duration-300 z-0"></div>
      </div>

      <!-- Product Card 2 -->
      <div class="bg-white bg-opacity-30 dark:bg-gray-800 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-xl shadow-2xl overflow-hidden transform transition-all duration-500 hover:scale-105 group relative">
        <div class="p-6 relative z-10">
          <img src="https://picsum.photos/id/238/400/300" alt="Product Image" class="w-full h-48 object-cover rounded-lg mb-4 shadow-md group-hover:shadow-xl transition-shadow duration-300">
          <h2 class="text-2xl font-semibold text-purple-900 dark:text-purple-200 mb-2">Product Title 2</h2>
          <p class="text-purple-800 dark:text-purple-300 text-lg mb-4">Another great product with amazing features and benefits you\

Checkout Form Component

A minimalist, flat design checkout form component for a portfolio, featuring earth tones, responsive design, dark mode support, and multiple interactive elements. Uses HTML and Tailwind CSS.

Open Preview

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-4 sm:p-8 flex items-center justify-center font-sans">
  <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 sm:p-8 lg:p-10 w-full max-w-md">
    <h2 class="text-2xl sm:text-3xl font-bold mb-6 text-gray-800 dark:text-gray-100 text-center">Checkout</h2>

    <!-- Progress Stepper -->
    <div class="flex justify-between items-center mb-8">
      <div class="text-center">
        <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-green-500 text-white flex items-center justify-center mx-auto mb-1 text-sm sm:text-base">1</div>
        <p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Shipping</p>
      </div>
      <div class="flex-1 h-1 bg-gray-300 dark:bg-gray-700 mx-2"></div>
      <div class="text-center">
        <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-gray-300 dark:bg-gray-700 text-gray-600 dark:text-gray-400 flex items-center justify-center mx-auto mb-1 text-sm sm:text-base">2</div>
        <p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Payment</p>
      </div>
      <div class="flex-1 h-1 bg-gray-300 dark:bg-gray-700 mx-2"></div>
      <div class="text-center">
        <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-gray-300 dark:bg-gray-700 text-gray-600 dark:text-gray-400 flex items-center justify-center mx-auto mb-1 text-sm sm:text-base">3</div>
        <p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Review</p>
      </div>
    </div>

    <!-- Shipping Information Form -->
    <form>
      <div class="mb-4">
        <label for="fullName" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Full Name</label>
        <input type="text" id="fullName" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500" placeholder="John Doe">
      </div>

      <div class="mb-4">
        <label for="address" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Address</label>
        <input type="text" id="address" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500" placeholder="1234 Main St">
      </div>

      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-4">
        <div>
          <label for="city" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">City</label>
          <input type="text" id="city" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500" placeholder="Anytown">
        </div>
        <div>
          <label for="state" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">State / Province</label>
          <input type="text" id="state" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500" placeholder="CA">
        </div>
      </div>

      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6">
        <div>
          <label for="zip" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Zip / Postal Code</label>
          <input type="text" id="zip" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500" placeholder="12345">
        </div>
        <div>
          <label for="country" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Country</label>
          <select id="country" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100">
            <option>United States</option>
            <option>Canada</option>
            <option>Mexico</option>
            <option>Other</option>
          </select>
        </div>
      </div>

      <button type="submit" class="w-full bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition duration-300 ease-in-out">
        Continue to Payment
      </button>
    </form>

    <!-- Product Summary (Example, can be expanded) -->
    <div class="mt-8 pt-6 border-t border-gray-200 dark:border-gray-700">
      <h3 class="text-xl font-semibold mb-4 text-gray-800 dark:text-gray-100">Order Summary</h3>
      <div class="flex justify-between mb-2">
        <span class="text-gray-600 dark:text-gray-400">Subtotal:</span>
        <span class="text-gray-800 dark:text-gray-100">$99.00</span>
      </div>
      <div class="flex justify-between mb-2">
        <span class="text-gray-600 dark:text-gray-400">Shipping:</span>
        <span class="text-gray-800 dark:text-gray-100">$7.00</span>
      </div>
      <div class="flex justify-between font-bold text-lg border-t border-gray-300 dark:border-gray-600 pt-2 mt-4">
        <span class="text-gray-800 dark:text-gray-100">Total:</span>
        <span class="text-gray-800 dark:text-gray-100">$106.00</span>
      </div>
    </div>

  </div>
</div>

1 ... 141 142 143 144 145 ... 335

Search Components

Categories

All Components