Interactive Components

Brutalist Product Card

A simple interactive product card component for e-commerce, with a Brutalist design in grayscale. It features a product image, title, price, and an 'Add to Cart' button. The component is responsive and supports dark mode. Hover effects are included for interactivity.

Open Preview

                <div class="dark:bg-gray-900 bg-gray-100 p-4 font-mono antialiased flex items-center justify-center min-h-screen">
  <div class="relative dark:bg-black bg-white border-2 border-black dark:border-white w-full max-w-sm mx-auto shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#fff]">
    <div class="overflow-hidden border-b-2 border-black dark:border-white">
      <img src="https://picsum.photos/400/300?random=1" alt="Product Image" class="w-full h-48 object-cover transition-transform duration-300 ease-in-out hover:scale-105">
    </div>
    <div class="p-4 relative">
      <h3 class="text-xl dark:text-white text-black font-bold mb-2 uppercase">Product Title Here</h3>
      <p class="text-black dark:text-gray-300 text-sm mb-4">A short and punchy description of the product, highlighting its brutalist appeal.</p>
      <div class="flex justify-between items-center mb-4">
        <span class="text-2xl dark:text-white text-black font-extrabold">$99.99</span>
        <button class="bg-black dark:bg-white text-white dark:text-black uppercase text-sm py-2 px-4 border-2 border-black dark:border-white font-bold hover:bg-gray-800 dark:hover:bg-gray-300 transition-colors duration-200 shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff]">Add to Cart</button>
      </div>
    </div>
    <div class="absolute -top-2 -right-2 bg-black dark:bg-white text-white dark:text-black px-2 py-1 text-xs font-bold uppercase border-2 border-black dark:border-white">New</div>
  </div>
</div>

A web component designed with skeuomorphic elements for social media interfaces featuring a complementary color scheme and dark theme support.

Open Preview

                <div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-lg flex flex-col lg:flex-row">
    <div class="flex-shrink-0 mb-4 lg:mb-0 lg:mr-4">
        <img class="w-16 h-16 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
    </div>
    <div class="flex-1">
        <h2 class="text-white dark:text-gray-200 text-xl font-bold">John Doe</h2>
        <p class="text-gray-400 dark:text-gray-500 text-sm mb-2">@john_doe</p>
        <p class="text-gray-300 dark:text-gray-400 mb-4">Here’s a glimpse of my recent adventures! 🗺️</p>
        <img class="w-full h-64 object-cover rounded-lg mb-4" src="https://picsum.photos/800/400?random=1" alt="Adventure Image">
        <div class="flex justify-between">
            <button class="bg-blue-500 dark:bg-blue-600 text-white font-semibold py-2 px-4 rounded hover:bg-blue-600 dark:hover:bg-blue-700 transition duration-300">Like</button>
            <button class="bg-green-500 dark:bg-green-600 text-white font-semibold py-2 px-4 rounded hover:bg-green-600 dark:hover:bg-green-700 transition duration-300">Comment</button>
            <button class="bg-red-500 dark:bg-red-600 text-white font-semibold py-2 px-4 rounded hover:bg-red-600 dark:hover:bg-red-700 transition duration-300">Share</button>
        </div>
    </div>
</div>

Interactive Components Component

An interactive component designed in Brutalism style, suitable for showcasing work or products with dark theme support.

Open Preview

                <div class="bg-gray-800 text-white p-8 rounded-lg shadow-lg">  <h1 class="text-3xl font-bold mb-6">My Portfolio</h1>  <div class="grid grid-cols-1 md:grid-cols-3 gap-6">    <div class="bg-gray-700 p-4 rounded-lg">      <img class="w-full h-32 object-cover rounded-t-lg" src="https://picsum.photos/300/200?random=1" alt="Project 1">      <h2 class="text-xl font-semibold mt-2">Project Title 1</h2>      <p class="text-gray-300">A short description of the project with high contrast and bold layout.</p>      <div class="mt-4 flex justify-between items-center">        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">        <a href="#" class="text-blue-400 hover:underline">View More</a>      </div>    </div>    <div class="bg-gray-700 p-4 rounded-lg">      <img class="w-full h-32 object-cover rounded-t-lg" src="https://picsum.photos/300/200?random=2" alt="Project 2">      <h2 class="text-xl font-semibold mt-2">Project Title 2</h2>      <p class="text-gray-300">A short description of the project with high contrast and bold layout.</p>      <div class="mt-4 flex justify-between items-center">        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar">        <a href="#" class="text-blue-400 hover:underline">View More</a>      </div>    </div>    <div class="bg-gray-700 p-4 rounded-lg">      <img class="w-full h-32 object-cover rounded-t-lg" src="https://picsum.photos/300/200?random=3" alt="Project 3">      <h2 class="text-xl font-semibold mt-2">Project Title 3</h2>      <p class="text-gray-300">A short description of the project with high contrast and bold layout.</p>      <div class="mt-4 flex justify-between items-center">        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar">        <a href="#" class="text-blue-400 hover:underline">View More</a>      </div>    </div>  </div>  <div class="mt-8 text-center">    <button class="bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-500">Load More Projects</button>  </div></div>

Interactive Components Component

A social media interactive component with a pastel color scheme, moderate complexity, responsive design, and dark mode support, built with Tailwind CSS and following Material Design principles. It uses dummy images from picsum.photos and avatars from randomuser.me.

Open Preview

                <div class="container mx-auto p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
  <div class="flex items-center mb-4">
    <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
    <div class="text-gray-900 dark:text-white font-bold text-lg">John Doe</div>
  </div>
  <img class="w-full h-64 object-cover mb-4 rounded-md" src="https://picsum.photos/seed/picsum/800/400" alt="Post Image">
  <p class="text-gray-700 dark:text-gray-300 mb-4">This is a sample social media post with a pastel color scheme and Material Design styling.</p>
  <div class="flex justify-between items-center text-gray-600 dark:text-gray-400 text-sm">
    <div class="flex items-center">
      <svg class="w-5 h-5 mr-1" 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="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21c-.644 0-1.25-.302-1.63-0.8L10 14V10m4 0H5a2 2 0 00-2 2v6a2 2 0 002 2h10l2.293 2.293c.032.032.07.05.107.05h.1l.1-.147l.145-.194-.013-.014L17 21.5l.354-.354.353.354z"></path></svg>
      <span>120 Likes</span>
    </div>
    <div class="flex items-center">
      <svg class="w-5 h-5 mr-1" 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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.913 9.913 0 01-3.981-.815F7.001 16.88C18.745 10.65 7.544 10.5 21 12z"></path></svg>
      <span>35 Comments</span>
    </div>
  </div>
  <div class="mt-4 flex items-center">
    <input type="text" class="w-full px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-blue-500" placeholder="Add a comment...">
    <button class="ml-2 px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600">Post</button>
  </div>
</div>

Interactive Components Component

A brutalist-inspired interactive component for a blog, featuring high contrast earth tones, responsive design, and dark mode support.

Open Preview

                <div class="min-h-screen bg-stone-100 dark:bg-stone-900 text-stone-900 dark:text-stone-100 p-6 lg:p-12 font-mono">

  <!-- Article Card with Brutalist Elements -->
  <div class="max-w-xl mx-auto bg-amber-700 dark:bg-amber-900 border-4 border-black dark:border-white shadow-[8px_8px_0_0_#000,12px_12px_0_0_#a16207] dark:shadow-[8px_8px_0_0_#fff,12px_12px_0_0_#44403c] transition duration-300 hover:shadow-[16px_16px_0_0_#000,20px_20px_0_0_#a16207] dark:hover:shadow-[16px_16px_0_0_#fff,20px_20px_0_0_#44403c]">
    <div class="p-6 border-b-4 border-black dark:border-white">
      <div class="text-sm font-bold mb-2 uppercase">Featured Article</div>
      <h2 class="text-3xl font-bold mb-4 leading-tight">The Unyielding Spirit of Brutalist Architecture</h2>
      <img src="https://picsum.photos/seed/brutalism/600/400" alt="Brutalist building" class="w-full h-48 object-cover mb-4 border-4 border-black dark:border-white">
      <p class="mb-4">
        Exploring the raw beauty and controversial history of Brutalist structures. Their imposing forms and
        unadorned surfaces evoke a sense of permanence and honesty.
      </p>
      <a href="#" class="inline-block bg-black dark:bg-white text-white dark:text-black px-6 py-3 font-bold border-4 border-black dark:border-white transform translate-y-1 translate-x-1 hover:translate-y-0 hover:translate-x-0 transition duration-100">
        Read More
      </a>
    </div>

    <!-- Related Articles Section -->
    <div class="p-6 border-b-4 border-black dark:border-white">
      <h3 class="text-2xl font-bold mb-4">More to Explore</h3>
      <ul>
        <li class="mb-4 pb-4 border-b border-stone-700 dark:border-stone-300 last:border-b-0">
          <a href="#" class="block hover:underline">
            <h4 class="text-xl font-bold mb-1">Concrete Jungle: Brutalism in Urban Landscapes</h4>
            <p class="text-sm text-stone-700 dark:text-stone-300">An analysis of Brutalism

Interactive Components Component

Interactive Components Component with Material Design, Triadic color scheme, Complex complexity, for E-commerce, with responsive design and dark theme support.

Open Preview

                <div class="bg-gray-100 dark:bg-gray-900 p-4">
  <div class="container mx-auto">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <!-- Product Card -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
        <img src="https://picsum.photos/seed/product1/400/300" alt="Product Image" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Title 1</h3>
          <p class="text-gray-600 dark:text-gray-300 mt-2">Short product description goes here. It can span a couple of lines.</p>
          <div class="flex items-center justify-between mt-4">
            <span class="text-xl font-bold text-blue-600 dark:text-blue-400">$199.99</span>
            <button class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 dark:bg-blue-400 dark:hover:bg-blue-500">Add to Cart</button>
          </div>
        </div>
      </div>

      <!-- Product Card -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
        <img src="https://picsum.photos/seed/product2/400/300" alt="Product Image" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Title 2</h3>
          <p class="text-gray-600 dark:text-gray-300 mt-2">Another short product description for variety and demonstration.</p>
          <div class="flex items-center justify-between mt-4">
            <span class="text-xl font-bold text-red-600 dark:text-red-400">$249.50</span>
            <button class="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700 dark:bg-red-400 dark:hover:bg-red-500">Add to Cart</button>
          </div>
        </div>
      </div>
      
       <!-- Product Card -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
        <img src="https://picsum.photos/seed/product3/400/300" alt="Product Image" class="w-full h-48 object-cover">
        <div class="p-4">
          <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Product Title 3</h3>
          <p class="text-gray-600 dark:text-gray-300 mt-2">Yet another product description to fill the card space.</p>
          <div class="flex items-center justify-between mt-4">
            <span class="text-xl font-bold text-green-600 dark:text-green-400">$145.00</span>
            <button class="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700 dark:bg-green-400 dark:hover:bg-green-500">Add to Cart</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Simple Dashboard Component

Simple, responsive dashboard component with Material Design principles and vibrant color scheme.

Open Preview

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-4">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
      <h2 class="text-xl font-bold text-gray-800 dark:text-white mb-4">Sales Overview</h2>
      <div class="flex items-center justify-between">
        <p class="text-3xl font-semibold text-blue-600 dark:text-blue-400">$12,345</p>
        <span class="text-green-500 dark:text-green-400">+5.2%</span>
      </div>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
      <h2 class="text-xl font-bold text-gray-800 dark:text-white mb-4">New Users</h2>
      <div class="flex items-center justify-between">
        <p class="text-3xl font-semibold text-purple-600 dark:text-purple-400">1,234</p>
        <span class="text-red-500 dark:text-red-400">-1.1%</span>
      </div>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 col-span-full">
      <h2 class="text-xl font-bold text-gray-800 dark:text-white mb-4">Recent Activity</h2>
      <ul>
        <li class="flex items-center mb-4">
          <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
          <div>
            <p class="text-gray-800 dark:text-white font-semibold">John Doe</p>
            <p class="text-gray-600 dark:text-gray-400 text-sm">Purchased a product</p>
          </div>
        </li>
         <li class="flex items-center">
          <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
          <div>
            <p class="text-gray-800 dark:text-white font-semibold">Jane Smith</p>
            <p class="text-gray-600 dark:text-gray-400 text-sm">Left a review</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

Interactive Portfolio Component

A responsive portfolio component with microinteractions and a pastel color scheme, supporting dark mode with Tailwind CSS.

Open Preview

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg transition duration-300 ease-in-out hover:shadow-xl">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">My Portfolio</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden transform transition-transform duration-300 hover:scale-105">
            <img src="https://picsum.photos/200/300?random=1" alt="Project Image" class="w-full h-48 object-cover">
            <div class="p-4">
                <h3 class="text-xl font-medium text-gray-800 dark:text-gray-200">Project Title</h3>
                <p class="text-gray-600 dark:text-gray-400">A brief description of the project showcasing my skills and creativity.</p>
            </div>
        </div>
        <div class="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden transform transition-transform duration-300 hover:scale-105">
            <img src="https://picsum.photos/200/300?random=2" alt="Project Image" class="w-full h-48 object-cover">
            <div class="p-4">
                <h3 class="text-xl font-medium text-gray-800 dark:text-gray-200">Project Title</h3>
                <p class="text-gray-600 dark:text-gray-400">A brief description of the project showcasing my skills and creativity.</p>
            </div>
        </div>
        <div class="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden transform transition-transform duration-300 hover:scale-105">
            <img src="https://picsum.photos/200/300?random=3" alt="Project Image" class="w-full h-48 object-cover">
            <div class="p-4">
                <h3 class="text-xl font-medium text-gray-800 dark:text-gray-200">Project Title</h3>
                <p class="text-gray-600 dark:text-gray-400">A brief description of the project showcasing my skills and creativity.</p>
            </div>
        </div>
        <div class="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden transform transition-transform duration-300 hover:scale-105">
            <img src="https://picsum.photos/200/300?random=4" alt="Project Image" class="w-full h-48 object-cover">
            <div class="p-4">
                <h3 class="text-xl font-medium text-gray-800 dark:text-gray-200">Project Title</h3>
                <p class="text-gray-600 dark:text-gray-400">A brief description of the project showcasing my skills and creativity.</p>
            </div>
        </div>
        <div class="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden transform transition-transform duration-300 hover:scale-105">
            <img src="https://picsum.photos/200/300?random=5" alt="Project Image" class="w-full h-48 object-cover">
            <div class="p-4">
                <h3 class="text-xl font-medium text-gray-800 dark:text-gray-200">Project Title</h3>
                <p class="text-gray-600 dark:text-gray-400">A brief description of the project showcasing my skills and creativity.</p>
            </div>
        </div>
        <div class="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden transform transition-transform duration-300 hover:scale-105">
            <img src="https://picsum.photos/200/300?random=6" alt="Project Image" class="w-full h-48 object-cover">
            <div class="p-4">
                <h3 class="text-xl font-medium text-gray-800 dark:text-gray-200">Project Title</h3>
                <p class="text-gray-600 dark:text-gray-400">A brief description of the project showcasing my skills and creativity.</p>
            </div>
        </div>
    </div>
    <div class="mt-6">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">About Me</h3>
        <div class="flex items-center mb-4">
            <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-3">
            <div>
                <h4 class="text-lg font-medium text-gray-800 dark:text-gray-200">Your Name</h4>
                <p class="text-gray-600 dark:text-gray-400">A short bio or description about yourself and your work.</p>
            </div>
        </div>
    </div>
    <button class="mt-4 bg-blue-500 text-white font-semibold py-2 px-4 rounded hover:bg-blue-600 transition duration-300 ease-in-out">Contact Me</button>
</div>

Interactive Components Component

A complex interactive component for social media with skeuomorphic design and monochromatic color scheme.

Open Preview

                <div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-lg max-w-lg mx-auto">
    <h2 class="text-white text-2xl font-bold mb-4">Interactive Components</h2>
    <div class="bg-gray-700 dark:bg-gray-800 rounded-lg shadow-inner p-4 mb-4">
        <h3 class="text-gray-300 text-lg font-semibold">User Posts</h3>
        <div class="flex items-center space-x-4 mb-3">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-gray-600" />
            <div class="flex-1">
                <textarea rows="3" class="w-full p-2 bg-gray-600 dark:bg-gray-700 text-white rounded-md border border-gray-500 focus:border-gray-400 focus:outline-none" placeholder="What's on your mind?"></textarea>
                <div class="flex justify-between mt-2">
                    <button class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-1 px-4 rounded">Post</button>
                    <button class="text-gray-400 hover:text-gray-200 font-semibold">Cancel</button>
                </div>
            </div>
        </div>
        <div class="bg-gray-800 dark:bg-gray-900 p-4 rounded-md">
            <div class="flex items-start space-x-3 mb-3">
                <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-600" />
                <div class="flex-1">
                    <p class="text-gray-200 font-semibold">Jane Doe</p>
                    <p class="text-gray-400">Just had a great coffee!</p>
                    <img src="https://picsum.photos/200/100?random=1" alt="Post Image" class="mt-2 rounded-lg shadow-md" />
                    <div class="flex space-x-4 mt-2">
                        <button class="flex items-center text-gray-400 hover:text-blue-500 font-semibold">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4H5v-4zm0 0l4-4H5v4zm14-4l4 4h-4l4-4zm0 0l-4-4h4l-4 4z"/></svg>
                            Like
                        </button>
                        <button class="flex items-center text-gray-400 hover:text-blue-500 font-semibold">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h8M8 14h3m6 5c1.042 0 1.932-.592 2.42-1.53a3.001 3.001 0 00-2.53-4.47c-.961 0-1.86.467-2.53 1.53-1.184 1.59-3.49 1.56-5.42.43-.758-.395-1.5-.87-2.5-1.43M9 21h6m-3-3.25l3.625-1.81a3.997 3.997 0 00-.676-7.376M15 19.25h-6m0 0l-.625 1.37M9 21l.365.734M11 20.25l3 1.25m-1-6v6m0-6s2 1.5 4 0m-4 0c-.5 0-.5-1 0-1.5s.5-1 1-1 2 0 2 0v1s-1.5 1.5-2 2c-1 0-1-1-1-1s-2 1 0 2c0 0 1 .5 2 0V19H9m1-2s-1 1-2 0m2 0c1.5 0 1.5 2 0 3c0 0-1-1 0-2z"/></svg>
                            Comment
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Interactive Components Component

Interactive Components Component Glassmorphism

Open Preview

                    
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="bg-white dark:bg-gray-800 bg-opacity-80 dark:bg-opacity-80 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg w-96">
    <div class="flex items-center justify-between mb-4">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-white">Product Title</h2>
      <span class="text-lg font-bold text-green-500 dark:text-green-400">$49.99</span>
    </div>
    <img class="w-full h-48 object-cover rounded-md mb-4" src="https://picsum.photos/seed/picsum/400/300" alt Light Pink Product Image">
    <p class="text-gray-600 dark:text-gray-300 mb-4">A brief description of the product goes here. It should be concise and informative.</p>
    <button class="w-full bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-600">Add to Cart</button>
  </div>
</div>

Categories

Interactive Components