Search Components

All Components

Browse all available Tailwind CSS components

Wishlist Component

A Wishlist Component with 3D design style, pastel color scheme, and responsive design for business websites, supporting dark mode.

Open Preview

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg max-w-md mx-auto p-6">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-100">My Wishlist</h2>
    <ul class="divide-y divide-gray-200 dark:divide-gray-700">
        <li class="py-4 flex items-center space-x-4 hover:bg-gray-100 dark:hover:bg-gray-700 transition duration-200">
            <img class="w-16 h-16 rounded-lg shadow-md" src="https://picsum.photos/seed/wishlist1/100/100" alt="Wishlist Item 1" />
            <div>
                <h3 class="text-lg font-medium text-gray-800 dark:text-gray-100">Item 1</h3>
                <p class="text-gray-500 dark:text-gray-400">Description of Item 1</p>
                <span class="text-purple-600 dark:text-purple-400">$29.99</span>
            </div>
        </li>
        <li class="py-4 flex items-center space-x-4 hover:bg-gray-100 dark:hover:bg-gray-700 transition duration-200">
            <img class="w-16 h-16 rounded-lg shadow-md" src="https://picsum.photos/seed/wishlist2/100/100" alt="Wishlist Item 2" />
            <div>
                <h3 class="text-lg font-medium text-gray-800 dark:text-gray-100">Item 2</h3>
                <p class="text-gray-500 dark:text-gray-400">Description of Item 2</p>
                <span class="text-purple-600 dark:text-purple-400">$39.99</span>
            </div>
        </li>
        <li class="py-4 flex items-center space-x-4 hover:bg-gray-100 dark:hover:bg-gray-700 transition duration-200">
            <img class="w-16 h-16 rounded-lg shadow-md" src="https://picsum.photos/seed/wishlist3/100/100" alt="Wishlist Item 3" />
            <div>
                <h3 class="text-lg font-medium text-gray-800 dark:text-gray-100">Item 3</h3>
                <p class="text-gray-500 dark:text-gray-400">Description of Item 3</p>
                <span class="text-purple-600 dark:text-purple-400">$49.99</span>
            </div>
        </li>
    </ul>
    <div class="mt-4 flex justify-between items-center">
        <span class="text-gray-700 dark:text-gray-300">Total:</span>
        <span class="text-purple-600 dark:text-purple-400 font-bold">$119.97</span>
    </div>
    <button class="mt-4 w-full bg-purple-500 dark:bg-purple-600 text-white font-semibold py-2 rounded hover:bg-purple-600 dark:hover:bg-purple-700 transition duration-200">Checkout</button>
</div>

Image Lightbox Component

A complex Image Lightbox Component designed in a Brutalist style, suitable for social media interfaces, featuring a grayscale color scheme and high contrast for dark mode support.

Open Preview

                <div class="relative z-10">
    <!-- Thumbnail Trigger -->
    <div class="mb-4">
        <img src="https://picsum.photos/200/300" alt="Thumbnail" class="cursor-pointer h-auto w-full border border-gray-700 hover:border-gray-500 dark:border-gray-300 dark:hover:border-gray-100">
    </div>

    <!-- Modal for Lightbox -->
    <div class="fixed inset-0 bg-gray-900 bg-opacity-75 dark:bg-opacity-95 flex items-center justify-center hidden group-hover:block">
        <div class="bg-gray-800 w-full max-w-3xl p-6 rounded-lg shadow-lg border border-gray-700">
            <!-- Image Display -->
            <img src="https://picsum.photos/800/600" alt="Large Image" class="w-full h-auto mb-4 rounded-lg border border-gray-600 dark:border-gray-400">
            <!-- Close Button -->
            <button class="absolute top-4 right-4 text-white hover:text-gray-400">
                &times;
            </button>
            <div class="flex justify-end mt-4">
                <a href="#" class="text-gray-300 hover:text-gray-100 transition-colors duration-200">Next</a>
                <a href="#" class="ml-4 text-gray-300 hover:text-gray-100 transition-colors duration-200">Previous</a>
            </div>
        </div>
    </div>
</div>

<style>
    /* Brutalist Styles */
    img {
        user-select: none;
    }
    button {
        background: none;
        border: none;
        font-size: 2rem;
        cursor: pointer;
    }
    button:hover {
        color: #ddd;
    }
    .hidden {
        display: none;
    }
</style>

Dark Mode Social Cards

A responsive card component styled for dark mode with earth tones, designed for social media interfaces.

Open Preview

                <div class="max-w-sm mx-auto p-4">
  <div class="bg-gray-800 rounded-lg shadow-lg dark:bg-gray-900">
    <img class="rounded-t-lg" src="https://picsum.photos/400/200" alt="Card image cap">
    <div class="p-4">
      <div class="flex items-center">
        <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
        <div class="ml-4">
          <h2 class="text-lg font-bold text-gray-300 dark:text-gray-100">John Doe</h2>
          <p class="text-sm text-gray-500 dark:text-gray-400">@john_doe</p>
        </div>
      </div>
      <p class="mt-2 text-gray-300 dark:text-gray-200">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut libero et neque vehicula porta.
      </p>
      <div class="flex justify-between mt-4">
        <button class="text-gray-300 dark:text-gray-200 hover:text-gray-200 dark:hover:text-gray-100">Like</button>
        <button class="text-gray-300 dark:text-gray-200 hover:text-gray-200 dark:hover:text-gray-100">Comment</button>
        <button class="text-gray-300 dark:text-gray-200 hover:text-gray-200 dark:hover:text-gray-100">Share</button>
      </div>
    </div>
  </div>
</div>

Media Embed Component

Responsive Media Embed Component with Glassmorphism style, Analogous color scheme, and Dark Mode support for content consumption.

Open Preview

                <div class="dark:bg-gray-900 py-8">
  <div class="container mx-auto px-4">
    <div class="max-w-sm mx-auto rounded-xl shadow-lg backdrop-filter backdrop-blur-lg bg-opacity-20 bg-white dark:bg-gray-800 dark:bg-opacity-20 overflow-hidden">
      <div class="relative">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/unsplash/400/300" alt="Media Placeholder">
        <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent"></div>
        <div class="absolute bottom-0 left-0 p-4 text-white">
          <h3 class="text-xl font-bold">Media Title</h3>
          <p class="text-sm">Date Published</p>
        </div>
      </div>
      <div class="p-4">
        <p class="text-gray-700 dark:text-gray-300 text-base">
          This is a description of the media content. It can be a short summary or excerpt.
        </p>
        <div class="flex items-center mt-4">
          <img class="w-10 h-10 rounded-full mr-4 object-cover" src="https://randomuser.me/api/portraits/men/random.jpg" alt="Avatar of Author">
          <div class="text-sm">
            <p class="text-gray-900 dark:text-white leading-none">Author Name</p>
            <p class="text-gray-600 dark:text-gray-400">Author Title</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

A responsive product reviews component designed for dark mode with a vibrant color scheme, suitable for business/corporate websites. It features user avatars, review ratings, and user comments in an interactive layout.

Open Preview

                <div class="max-w-4xl mx-auto p-6 bg-gray-900 text-white rounded-lg shadow-lg">
  <h2 class="text-2xl font-bold mb-4">Product Reviews</h2>
  <div class="space-y-4">
    <!-- Review Item -->
    <div class="flex items-start bg-gray-800 p-4 rounded-lg">
      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-4">
      <div class="flex-1">
        <div class="flex items-center mb-1">
          <span class="text-yellow-400 text-xl">
            &#9733;&#9733;&#9733;&#9733;&#9734;
          </span>
          <span class="ml-2 text-sm text-gray-400">4.0</span>
        </div>
        <p class="text-gray-300">Great product! Highly recommend it to others.</p>
        <span class="text-gray-500 text-xs">by John Doe on June 15, 2023</span>
      </div>
    </div>
    <!-- Review Item -->
    <div class="flex items-start bg-gray-800 p-4 rounded-lg">
      <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-4">
      <div class="flex-1">
        <div class="flex items-center mb-1">
          <span class="text-yellow-400 text-xl">
            &#9733;&#9733;&#9733;&#9733;&#9733;
          </span>
          <span class="ml-2 text-sm text-gray-400">5.0</span>
        </div>
        <p class="text-gray-300">Absolutely love this! It's perfect for my needs!</p>
        <span class="text-gray-500 text-xs">by Jane Smith on June 10, 2023</span>
      </div>
    </div>
    <!-- Review Item -->
    <div class="flex items-start bg-gray-800 p-4 rounded-lg">
      <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-4">
      <div class="flex-1">
        <div class="flex items-center mb-1">
          <span class="text-yellow-400 text-xl">
            &#9733;&#9733;&#9733;&#9732;&#9732;
          </span>
          <span class="ml-2 text-sm text-gray-400">3.0</span>
        </div>
        <p class="text-gray-300">It's okay, but I expected better quality.</p>
        <span class="text-gray-500 text-xs">by Mike Johnson on June 5, 2023</span>
      </div>
    </div>
  </div>
</div>

User Mentions Component

A responsive user mentions component with dark theme support and microinteractions, designed for business websites using Tailwind CSS.

Open Preview

                <div class="bg-gray-100 dark:bg-gray-800 py-8 px-4 sm:px-6 lg:px-8">
  <div class="max-w-md mx-auto">
    <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-6">User Mentions</h2>
    <div class="space-y-4">
      <!-- Mention 1 -->
      <div class="flex items-center bg-white dark:bg-gray-700 rounded-lg shadow-md p-4 transform transition duration-300 hover:scale-105">
        <img class="h-10 w-10 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User avatar">
        <div>
          <p class="text-sm font-semibold text-gray-900 dark:text-white">Jane Doe</p>
          <p class="text-sm text-gray-600 dark:text-gray-300">Mentioned you in a post</p>
        </div>
        <div class="ml-auto">
          <svg class="h-5 w-5 text-gray-400 dark:text-gray-500 transform transition duration-300 hover:rotate-12" 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="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m9 0a3 3 0 01-6 0m-9 0a3 3 0 01-6 0"></path></svg>
        </div>
      </div>

      <!-- Mention 2 -->
      <div class="flex items-center bg-white dark:bg-gray-700 rounded-lg shadow-md p-4 transform transition duration-300 hover:scale-105">
        <img class="h-10 w-10 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User avatar">
        <div>
          <p class="text-sm font-semibold text-gray-900 dark:text-white">John Smith</p>
          <p class="text-sm text-gray-600 dark:text-gray-300">Replied to your comment</p>
        </div>
        <div class="ml-auto">
           <svg class="h-5 w-5 text-gray-400 dark:text-gray-500 transform transition duration-300 hover:rotate-12" 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="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m9 0a3 3 0 01-6 0m-9 0a3 3 0 01-6 0"></path></svg>
        </div>
      </div>

      <!-- Mention 3 -->
       <div class="flex items-center bg-white dark:bg-gray-700 rounded-lg shadow-md p-4 transform transition duration-300 hover:scale-105">
        <img class="h-10 w-10 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User avatar">
        <div>
          <p class="text-sm font-semibold text-gray-900 dark:text-white">Jessica Williams</p>
          <p class="text-sm text-gray-600 dark:text-gray-300">Liked your photo</p>
        </div>
        <div class="ml-auto">
           <svg class="h-5 w-5 text-gray-400 dark:text-gray-500 transform transition duration-300 hover:rotate-12" 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="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m9 0a3 3 0 01-6 0m-9 0a3 3 0 01-6 0"></path></svg>
        </div>
      </div>
    </div>
  </div>
</div>

CAPTCHA Component

A 3D styled CAPTCHA component designed for dashboards with vibrant colors and responsive design, supporting dark mode.

Open Preview

                <div class="flex flex-col items-center justify-center p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg transition duration-300 ease-in-out transform hover:scale-105">
    <h2 class="text-lg font-bold text-center text-vibrant-600 dark:text-vibrant-300 mb-4">Please verify you are human</h2>
    <div class="w-full max-w-xs">
        <div class="bg-gradient-to-r from-purple-500 to-blue-500 p-4 rounded-lg shadow-xl text-white flex items-center justify-between">  
            <img src="https://picsum.photos/100" alt="Random Image" class="rounded-lg shadow-md" />
            <p class="ml-4">Check all images with a car</p>
        </div>
        <div class="grid grid-cols-3 gap-2 my-4">  
            <img src="https://picsum.photos/50?random=1" alt="Image 1" class="rounded-lg border-2 border-transparent transition duration-300 ease-in-out transform hover:shadow-2xl dark:hover:border-vibrant-300" />
            <img src="https://picsum.photos/50?random=2" alt="Image 2" class="rounded-lg border-2 border-transparent transition duration-300 ease-in-out transform hover:shadow-2xl dark:hover:border-vibrant-300" />
            <img src="https://picsum.photos/50?random=3" alt="Image 3" class="rounded-lg border-2 border-transparent transition duration-300 ease-in-out transform hover:shadow-2xl dark:hover:border-vibrant-300" />
            <img src="https://picsum.photos/50?random=4" alt="Image 4" class="rounded-lg border-2 border-transparent transition duration-300 ease-in-out transform hover:shadow-2xl dark:hover:border-vibrant-300" />
            <img src="https://picsum.photos/50?random=5" alt="Image 5" class="rounded-lg border-2 border-transparent transition duration-300 ease-in-out transform hover:shadow-2xl dark:hover:border-vibrant-300" />
            <img src="https://picsum.photos/50?random=6" alt="Image 6" class="rounded-lg border-2 border-transparent transition duration-300 ease-in-out transform hover:shadow-2xl dark:hover:border-vibrant-300" />
        </div>
        <button class="w-full bg-vibrant-600 hover:bg-vibrant-500 text-white py-2 rounded-lg transition duration-300 ease-in-out shadow-lg">Verify</button>
    </div>
</div>

Interactive Components Component

Interactive Components Component with Skeuomorphism design, Analogous color scheme, and Moderate complexity for Blog/Content purpose. Responsive design with dark theme support. No JavaScript code.

Open Preview

                <div class="bg-gray-200 dark:bg-gray-900 p-6 rounded-lg shadow-xl max-w-sm mx-auto">
  <div class="relative">
    <img class="w-full h-48 object-cover rounded-md border-4 border-gray-300 dark:border-gray-700" src="https://picsum.photos/seed/skeuomorphism/400/300" alt="Article Image">
    <div class="absolute bottom-0 right-0 bg-gradient-to-tl from-gray-400 to-gray-300 dark:from-gray-700 dark:to-gray-800 text-gray-800 dark:text-gray-200 text-xs px-2 py-1 rounded-tl-lg">Skeuomorphism</div>
  </div>
  <div class="mt-4">
    <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Blog Post Title</h2>
    <p class="text-gray-700 dark:text-gray-300 mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div class="flex justify-between items-center mt-4">
    <div class="flex items-center">
      <img class="w-8 h-8 rounded-full mr-2 border-2 border-gray-300 dark:border-gray-700" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar">
      <span class="text-gray-700 dark:text-gray-300 text-sm">John Doe</span>
    </div>
    <button class="bg-gradient-to-br from-blue-500 to-purple-600 text-white px-4 py-2 rounded-full shadow-md hover:shadow-lg transition duration-300 ease-in-out transform hover:-translate-y-1">Read More</button>
  </div>
  <div class="mt-4 flex justify-around text-gray-600 dark:text-gray-400 text-sm">
    <div class="flex items-center">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd" d="M18 3a1 1 0 00-1.447-.894L10 6l-6.553-3.894A1 1 0 002 3v14a1 1 0 001 1h14a1 1 0 001-1V3z" clip-rule="evenodd" />
      </svg>
      <span>Save</span>
    </div>
    <div class="flex items-center">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
        <path d="M15 8a3 3 0 10-2.977-2.455l-4.78 2.49a3 3 0 00-4.633.908l-1.5-.8A3 3 0 105 12v1a1 1 0 100 2v1a1 1 0 100 2h2a1 1 0 100-2h1a1 1 0 100-2h2a1 1 0 100-2h3a3 3 0 10-3-3zm-3.154 9A3 3 0 1016 13.802v-4.036l-.078.04A2.005 2.005 0 0115 9a2 2 0 11-1.923 2.554l-.078.04V17z" />
      </svg>
      <span>Share</span>
    </div>
  </div>
</div>

Functional Components Component

A simple web component designed for blog and content consumption, featuring engaging micro-interactions and a grayscale color scheme with dark theme support.

Open Preview

                <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
  <div class="p-4">
    <h2 class="text-xl font-bold text-gray-800 dark:text-white mb-2">Blog Post Title</h2>
    <p class="text-gray-600 dark:text-gray-300 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis pretium massa.</p>
    <div class="flex items-center">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar" class="w-10 h-10 rounded-full mr-3" />
      <div class="text-sm">
        <p class="text-gray-800 dark:text-white">Author Name</p>
        <p class="text-gray-500 dark:text-gray-400">Feb 16, 2023</p>
      </div>
    </div>
  </div>
  <img src="https://picsum.photos/400/200" alt="Blog Post Image" class="w-full h-48 object-cover bg-gray-200 dark:bg-gray-700 transition-all duration-300 transform hover:scale-105" />
  <div class="p-4 bg-gray-100 dark:bg-gray-700">
    <button class="px-4 py-2 bg-gray-800 text-white font-semibold rounded-lg hover:bg-gray-700 dark:bg-gray-300 dark:text-gray-800 dark:hover:bg-gray-200 transition duration-150 ease-in-out">Read More</button>
  </div>
</div>

Community Forum Component

A responsive community forum component designed with Material Design principles, suitable for blog and content consumption. It features a grid layout, interactive elements, and supports dark themes using Tailwind CSS.

Open Preview

                <div class="bg-gray-100 dark:bg-gray-900 p-6 rounded-lg shadow-md">
  <h1 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-4">Community Forum</h1>
  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
      <img src="https://picsum.photos/200/100" alt="Post Image" class="rounded-t-lg">
      <div class="p-4">
        <div class="flex items-center mb-2">
          <img src="https://randomuser.me/api/portraits/men/10.jpg" class="w-8 h-8 rounded-full mr-2" alt="User Avatar">
          <span class="font-semibold text-gray-700 dark:text-gray-200">John Doe</span>
        </div>
        <h2 class="font-bold text-lg text-gray-800 dark:text-gray-100 mb-2">Understanding Material Design</h2>
        <p class="text-gray-600 dark:text-gray-300">This post discusses the key principles of Material Design and how to implement them effectively using Tailwind CSS.</p>
        <div class="mt-4">
          <a href="#" class="text-blue-500 hover:text-blue-700 dark:hover:text-blue-400">Read More</a>
        </div>
      </div>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
      <img src="https://picsum.photos/200/101" alt="Post Image" class="rounded-t-lg">
      <div class="p-4">
        <div class="flex items-center mb-2">
          <img src="https://randomuser.me/api/portraits/women/10.jpg" class="w-8 h-8 rounded-full mr-2" alt="User Avatar">
          <span class="font-semibold text-gray-700 dark:text-gray-200">Jane Smith</span>
        </div>
        <h2 class="font-bold text-lg text-gray-800 dark:text-gray-100 mb-2">Tailwind CSS for Beginners</h2>
        <p class="text-gray-600 dark:text-gray-300">A beginner's guide to Tailwind CSS, exploring its utility-first approach and customization options.</p>
        <div class="mt-4">
          <a href="#" class="text-blue-500 hover:text-blue-700 dark:hover:text-blue-400">Read More</a>
        </div>
      </div>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
      <img src="https://picsum.photos/200/102" alt="Post Image" class="rounded-t-lg">
      <div class="p-4">
        <div class="flex items-center mb-2">
          <img src="https://randomuser.me/api/portraits/men/20.jpg" class="w-8 h-8 rounded-full mr-2" alt="User Avatar">
          <span class="font-semibold text-gray-700 dark:text-gray-200">Michael Johnson</span>
        </div>
        <h2 class="font-bold text-lg text-gray-800 dark:text-gray-100 mb-2">Accessibility in Design</h2>
        <p class="text-gray-600 dark:text-gray-300">Exploring the importance of accessibility in design and how to ensure your designs are inclusive.</p>
        <div class="mt-4">
          <a href="#" class="text-blue-500 hover:text-blue-700 dark:hover:text-blue-400">Read More</a>
        </div>
      </div>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
      <img src="https://picsum.photos/200/103" alt="Post Image" class="rounded-t-lg">
      <div class="p-4">
        <div class="flex items-center mb-2">
          <img src="https://randomuser.me/api/portraits/women/20.jpg" class="w-8 h-8 rounded-full mr-2" alt="User Avatar">
          <span class="font-semibold text-gray-700 dark:text-gray-200">Emily Davis</span>
        </div>
        <h2 class="font-bold text-lg text-gray-800 dark:text-gray-100 mb-2">Responsive Web Design</h2>
        <p class="text-gray-600 dark:text-gray-300">Learn how to create responsive web designs that adapt to different screen sizes and devices.</p>
        <div class="mt-4">
          <a href="#" class="text-blue-500 hover:text-blue-700 dark:hover:text-blue-400">Read More</a>
        </div>
      </div>
    </div>
  </div>
</div>

1 ... 257 258 259 260 261 ... 335

Search Components

Categories

All Components

Wishlist Component

Image Lightbox Component

Dark Mode Social Cards

Media Embed Component

Product Reviews Component

User Mentions Component

CAPTCHA Component

Interactive Components Component

Functional Components Component

Community Forum Component