All Components

Social Login Component

A retro/vintage social login component designed for e-commerce platforms with a pastel color scheme and dark mode support.

Open Preview

                <div class="flex flex-col items-center justify-center min-h-screen bg-white dark:bg-gray-900 p-6">
    <div class="bg-pastel-pink rounded-lg shadow-lg p-8 w-80">
        <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white">Welcome Back!</h2>
        <p class="text-gray-600 dark:text-gray-400 mb-6 text-center">Log in using your favorite social media account</p>
        <div class="flex flex-col space-y-4">
            <a href="#" class="flex items-center justify-center bg-blue-400 dark:bg-blue-700 text-white rounded-lg p-2 hover:bg-blue-500 dark:hover:bg-blue-600 transition duration-200 ease-in-out">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="avatar" class="w-8 h-8 rounded-full mr-2">
                Login with Facebook
            </a>
            <a href="#" class="flex items-center justify-center bg-red-400 dark:bg-red-700 text-white rounded-lg p-2 hover:bg-red-500 dark:hover:bg-red-600 transition duration-200 ease-in-out">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="avatar" class="w-8 h-8 rounded-full mr-2">
                Login with Google
            </a>
            <a href="#" class="flex items-center justify-center bg-green-400 dark:bg-green-700 text-white rounded-lg p-2 hover:bg-green-500 dark:hover:bg-green-600 transition duration-200 ease-in-out">
                <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="avatar" class="w-8 h-8 rounded-full mr-2">
                Login with Twitter
            </a>
        </div>
        <div class="mt-4 text-center">
            <p class="text-gray-600 dark:text-gray-400">Don't have an account? <a href="#" class="text-blue-400 dark:text-blue-300 hover:underline">Sign up</a></p>
        </div>
    </div>
</div>

Back to Top Button Component with 3D design, vibrant color scheme, and complex interactive elements for social media interfaces, using Tailwind CSS. It includes responsive design and dark theme support.

Open Preview

                <div class="fixed bottom-5 right-5 z-50">
  <button
    class="back-to-top-btn bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500 text-white p-4 rounded-full shadow-lg transform transition-transform duration-300 hover:scale-110 active:scale-95 focus:outline-none focus:ring-4 focus:ring-pink-300 dark:focus:ring-pink-800"
    aria-label="Back to top"
  >
    <svg
      class="w-6 h-6"
      fill="none"
      stroke="currentColor"
      viewBox="0 0 24 24"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="M5 10l7-7m0 0l7 7m-7-7v18"
      ></path>
    </svg>
  </button>
</div>

<style>
  .back-to-top-btn {
    /* Adding basic 3D effect with box-shadow */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2),
                0 6px 6px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease-in-out;
  }

  .back-to-top-btn:hover {
      box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25),
                  0 10px 10px rgba(0, 0, 0, 0.22);
  }

  .back-to-top-btn:active {
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12),
                  0 1px 2px rgba(0, 0, 0, 0.24);
  }
</style>

Product Reviews Component

A complex product reviews component designed for a dashboard, featuring 3D design elements, earth tone colors, and support for dark mode.

Open Preview

                <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-gray-200">Product Reviews</h2>
    <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
        <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md transition-transform transform hover:scale-105">
            <div class="flex items-center mb-4">
                <img src="https://picsum.photos/50?random=1" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
                <div>
                    <p class="font-semibold text-gray-800 dark:text-gray-200">John Doe</p>
                    <p class="text-sm text-gray-600 dark:text-gray-400">12th October, 2023</p>
                </div>
            </div>
            <p class="text-gray-700 dark:text-gray-300 mb-2">Great product! Really helped me in my work.</p>
            <div class="flex items-center">
                <span class="text-yellow-500 font-bold">4.5</span>
                <svg class="w-4 h-4 text-yellow-500 ml-1" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15.25l4.25 3.5-1.125-5.875L19 9.5h-6l-2-5-2 5H5l5.875 3.875L12 15.25z"/>
                </svg>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md transition-transform transform hover:scale-105">
            <div class="flex items-center mb-4">
                <img src="https://picsum.photos/50?random=2" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
                <div>
                    <p class="font-semibold text-gray-800 dark:text-gray-200">Jane Smith</p>
                    <p class="text-sm text-gray-600 dark:text-gray-400">10th October, 2023</p>
                </div>
            </div>
            <p class="text-gray-700 dark:text-gray-300 mb-2">I found it very useful, but it has some minor bugs.</p>
            <div class="flex items-center">
                <span class="text-yellow-500 font-bold">3.8</span>
                <svg class="w-4 h-4 text-yellow-500 ml-1" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15.25l4.25 3.5-1.125-5.875L19 9.5h-6l-2-5-2 5H5l5.875 3.875L12 15.25z"/>
                </svg>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md transition-transform transform hover:scale-105">
            <div class="flex items-center mb-4">
                <img src="https://picsum.photos/50?random=3" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
                <div>
                    <p class="font-semibold text-gray-800 dark:text-gray-200">Mike Johnson</p>
                    <p class="text-sm text-gray-600 dark:text-gray-400">5th October, 2023</p>
                </div>
            </div>
            <p class="text-gray-700 dark:text-gray-300 mb-2">A bit expensive, but the quality is top-notch.</p>
            <div class="flex items-center">
                <span class="text-yellow-500 font-bold">4.0</span>
                <svg class="w-4 h-4 text-yellow-500 ml-1" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15.25l4.25 3.5-1.125-5.875L19 9.5h-6l-2-5-2 5H5l5.875 3.875L12 15.25z"/>
                </svg>
            </div>
        </div>
    </div>
</div>

Product Gallery Component

A simple product gallery component designed with 3D elements for depth, using a triadic color scheme. It's responsive and supports dark theme, suitable for showcasing work or products.

Open Preview

                <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-lg">
  <h2 class="text-2xl font-bold mb-4 text-center text-gray-800 dark:text-gray-200">Product Gallery</h2>
  <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
    <div class="rounded-lg overflow-hidden shadow-md transform transition-transform duration-300 hover:-translate-y-1">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=1" alt="Product 1">
      <div class="p-4 bg-white dark:bg-gray-700">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product 1</h3>
        <p class="text-gray-600 dark:text-gray-400">Description of product 1.</p>
      </div>
    </div>
    <div class="rounded-lg overflow-hidden shadow-md transform transition-transform duration-300 hover:-translate-y-1">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=2" alt="Product 2">
      <div class="p-4 bg-white dark:bg-gray-700">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product 2</h3>
        <p class="text-gray-600 dark:text-gray-400">Description of product 2.</p>
      </div>
    </div>
    <div class="rounded-lg overflow-hidden shadow-md transform transition-transform duration-300 hover:-translate-y-1">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=3" alt="Product 3">
      <div class="p-4 bg-white dark:bg-gray-700">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product 3</h3>
        <p class="text-gray-600 dark:text-gray-400">Description of product 3.</p>
      </div>
    </div>
    <div class="rounded-lg overflow-hidden shadow-md transform transition-transform duration-300 hover:-translate-y-1">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=4" alt="Product 4">
      <div class="p-4 bg-white dark:bg-gray-700">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product 4</h3>
        <p class="text-gray-600 dark:text-gray-400">Description of product 4.</p>
      </div>
    </div>
    <div class="rounded-lg overflow-hidden shadow-md transform transition-transform duration-300 hover:-translate-y-1">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=5" alt="Product 5">
      <div class="p-4 bg-white dark:bg-gray-700">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product 5</h3>
        <p class="text-gray-600 dark:text-gray-400">Description of product 5.</p>
      </div>
    </div>
    <div class="rounded-lg overflow-hidden shadow-md transform transition-transform duration-300 hover:-translate-y-1">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=6" alt="Product 6">
      <div class="p-4 bg-white dark:bg-gray-700">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product 6</h3>
        <p class="text-gray-600 dark:text-gray-400">Description of product 6.</p>
      </div>
    </div>
  </div>
</div>

Social Components Component

A portfolio component designed in dark mode with a monochromatic color scheme. It showcases work or products with a simple layout.

Open Preview

                <div class="bg-gray-900 text-gray-100 p-6 rounded-lg shadow-md">
    <h2 class="text-2xl font-bold mb-4">My Portfolio</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="bg-gray-800 p-4 rounded-lg shadow">
            <img class="h-32 w-full object-cover rounded-t-lg" src="https://picsum.photos/200/150?random=1" alt="Project 1" />
            <h3 class="text-xl font-semibold mt-2">Project Title 1</h3>
            <p class="text-gray-400">Short description of the project goes here.</p>
        </div>
        <div class="bg-gray-800 p-4 rounded-lg shadow">
            <img class="h-32 w-full object-cover rounded-t-lg" src="https://picsum.photos/200/150?random=2" alt="Project 2" />
            <h3 class="text-xl font-semibold mt-2">Project Title 2</h3>
            <p class="text-gray-400">Short description of the project goes here.</p>
        </div>
        <div class="bg-gray-800 p-4 rounded-lg shadow">
            <img class="h-32 w-full object-cover rounded-t-lg" src="https://picsum.photos/200/150?random=3" alt="Project 3" />
            <h3 class="text-xl font-semibold mt-2">Project Title 3</h3>
            <p class="text-gray-400">Short description of the project goes here.</p>
        </div>
        <div class="bg-gray-800 p-4 rounded-lg shadow">
            <img class="h-32 w-full object-cover rounded-t-lg" src="https://picsum.photos/200/150?random=4" alt="Project 4" />
            <h3 class="text-xl font-semibold mt-2">Project Title 4</h3>
            <p class="text-gray-400">Short description of the project goes here.</p>
        </div>
    </div>
    <hr class="my-6 border-gray-700" />
    <div class="flex items-center justify-between">
        <div class="flex items-center">
            <img class="h-10 w-10 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/50.jpg" alt="Avatar" />
            <div>
                <h4 class="text-lg font-semibold">Your Name</h4>
                <p class="text-gray-400">Your Title or Profession</p>
            </div>
        </div>
        <a href="#" class="bg-blue-600 text-gray-100 py-2 px-4 rounded hover:bg-blue-700 transition duration-300">Contact Me</a>
    </div>
</div>

Brutalist Product Comparison

Brutalist Product Comparison Component for Social Media with Monochromatic color scheme and dark mode support

Open Preview

                <div class="bg-white dark:bg-zinc-800 text-zinc-900 dark:text-white p-4">
  <h2 class="text-2xl font-bold mb-4 border-b-2 border-zinc-900 dark:border-white pb-2">Compare Products</h2>
  <div class="grid grid-cols-2 gap-4">
    <div class="border-2 border-zinc-900 dark:border-white p-4">
      <h3 class="text-xl font-semibold mb-2">Product A</h3>
      <img src="https://picsum.photos/seed/producta/200/150" alt="Product A" class="mb-2 w-full h-auto">
      <ul class="list-disc list-inside">
        <li>Feature 1</li>
        <li>Feature 2</li>
        <li>Feature 3</li>
      </ul>
    </div>
    <div class="border-2 border-zinc-900 dark:border-white p-4">
      <h3 class="text-xl font-semibold mb-2">Product B</h3>
      <img src="https://picsum.photos/seed/productb/200/150" alt="Product B" class="mb-2 w-full h-auto">
      <ul class="list-disc list-inside">
        <li>Feature X</li>
        <li>Feature Y</li>
        <li>Feature Z</li>
      </ul>
    </div>
  </div>
</div>

Skeuomorphic Badges

A set of badges with a skeuomorphic design, complementary color scheme, and simple layout, suitable for a blog or content site. Responsive with dark mode support.

Open Preview

                <div class="flex flex-wrap gap-2 p-4 bg-gray-100 dark:bg-gray-800">
  <span class="px-3 py-1 rounded-full text-sm font-semibold text-blue-800 bg-blue-200 border border-blue-400 shadow-lg dark:text-blue-200 dark:bg-blue-800 dark:border-blue-600">
    Skeuomorphism
  </span>
  <span class="px-3 py-1 rounded-full text-sm font-semibold text-green-800 bg-green-200 border border-green-400 shadow-lg dark:text-green-200 dark:bg-green-800 dark:border-green-600">
    Complementary
  </span>
  <span class="px-3 py-1 rounded-full text-sm font-semibold text-yellow-800 bg-yellow-200 border border-yellow-400 shadow-lg dark:text-yellow-200 dark:bg-yellow-800 dark:border-yellow-600">
    Simple
  </span>
  <span class="px-3 py-1 rounded-full text-sm font-semibold text-red-800 bg-red-200 border border-red-400 shadow-lg dark:text-red-200 dark:bg-red-800 dark:border-red-600">
    Blog
  </span>
</div>

Wishlist Component

A simple e-commerce wishlist component with microinteractions and a grayscale color scheme, optimized for responsive design and dark mode support.

Open Preview

                <div class="max-w-md mx-auto my-10 p-5 bg-white dark:bg-gray-800 rounded-lg shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Wishlist</h2>
    <ul class="space-y-4">
        <li class="border border-gray-300 dark:border-gray-700 rounded-lg p-4 flex items-center justify-between transition-shadow duration-300 ease-in-out hover:shadow-lg">
            <img src="https://picsum.photos/100/100" alt="Product Image" class="w-20 h-20 object-cover rounded bg-gray-200" />
            <div class="flex-1 mx-4">
                <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Product Name</h3>
                <p class="text-gray-500 dark:text-gray-400">$19.99</p>
            </div>
            <button class="text-red-600 dark:text-red-400 hover:underline focus:outline-none">Remove</button>
        </li>
        <li class="border border-gray-300 dark:border-gray-700 rounded-lg p-4 flex items-center justify-between transition-shadow duration-300 ease-in-out hover:shadow-lg">
            <img src="https://picsum.photos/100/101" alt="Product Image" class="w-20 h-20 object-cover rounded bg-gray-200" />
            <div class="flex-1 mx-4">
                <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Another Product</h3>
                <p class="text-gray-500 dark:text-gray-400">$29.99</p>
            </div>
            <button class="text-red-600 dark:text-red-400 hover:underline focus:outline-none">Remove</button>
        </li>
    </ul>
    <button class="mt-6 w-full bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-800 font-bold py-2 px-4 rounded hover:bg-gray-900 dark:hover:bg-gray-300 transition duration-300">Move to Cart</button>
</div>

Product Cards Component

A complex product card component featuring engaging microinteractions and a monochromatic color scheme. Designed for business websites, it is responsive and supports dark mode.

Open Preview

                <div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3 p-6">
    <div class="transform transition-transform duration-300 hover:scale-105 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden hover:shadow-xl">
        <img src="https://picsum.photos/300/200" alt="Product Image" class="w-full h-48 object-cover">
        <div class="p-4">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Title</h2>
            <p class="text-gray-600 dark:text-gray-400 mt-2">Short description of the product that showcases its features and benefits.</p>
            <div class="flex items-center justify-between mt-4">
                <span class="text-xl font-bold text-gray-900 dark:text-gray-100">$99.99</span>
                <button class="bg-blue-500 text-white py-2 px-4 rounded-full transition duration-300 ease-in-out hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500">Buy Now</button>
            </div>
        </div>
    </div>
    <div class="transform transition-transform duration-300 hover:scale-105 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden hover:shadow-xl">
        <img src="https://picsum.photos/300/201" alt="Product Image" class="w-full h-48 object-cover">
        <div class="p-4">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Title</h2>
            <p class="text-gray-600 dark:text-gray-400 mt-2">Short description of the product that showcases its features and benefits.</p>
            <div class="flex items-center justify-between mt-4">
                <span class="text-xl font-bold text-gray-900 dark:text-gray-100">$89.99</span>
                <button class="bg-blue-500 text-white py-2 px-4 rounded-full transition duration-300 ease-in-out hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500">Buy Now</button>
            </div>
        </div>
    </div>
    <div class="transform transition-transform duration-300 hover:scale-105 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden hover:shadow-xl">
        <img src="https://picsum.photos/300/202" alt="Product Image" class="w-full h-48 object-cover">
        <div class="p-4">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Title</h2>
            <p class="text-gray-600 dark:text-gray-400 mt-2">Short description of the product that showcases its features and benefits.</p>
            <div class="flex items-center justify-between mt-4">
                <span class="text-xl font-bold text-gray-900 dark:text-gray-100">$79.99</span>
                <button class="bg-blue-500 text-white py-2 px-4 rounded-full transition duration-300 ease-in-out hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500">Buy Now</button>
            </div>
        </div>
    </div>
</div>

File Viewer Component

Responsive File Viewer Component with Brutalism and Pastel Design

Open Preview

                <div class="bg-pink-100 dark:bg-gray-800 min-h-screen font-mono">
  <div class="container mx-auto p-4 lg:p-8">
    <div class="bg-white dark:bg-gray-900 shadow-xl border-4 border-black dark:border-gray-700 transform -rotate-2 hover:rotate-0 transition-transform duration-300">
      <div class="border-b-4 border-black dark:border-gray-700 px-6 py-4 flex justify-between items-center bg-yellow-200 dark:bg-yellow-700">
        <h2 class="text-2xl font-bold text-black dark:text-white">File: document.pdf</h2>
        <span class="text-sm text-gray-700 dark:text-gray-300">Size: 1.2 MB</span>
      </div>
      <div class="p-6">
        <div class="border-2 border-dashed border-gray-400 dark:border-gray-600 p-8 text-center text-gray-600 dark:text-gray-400 bg-gray-200 dark:bg-gray-800">
          <p class="mb-4">Content preview unavailable for this file type.</p>
          <svg class="mx-auto h-12 w-12 text-gray-500 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h4l2 2h4a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z" />
          </svg>
        </div>
        
        <div class="mt-6 border-t-4 border-black dark:border-gray-700 pt-6">
          <h3 class="text-xl font-bold mb-4 text-black dark:text-white">File Details</h3>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm text-gray-800 dark:text-gray-200">
            <div><strong>Type:</strong> PDF Document</div>
            <div><strong>Date Uploaded:</strong> 2023-10-27</div>
            <div><strong>Author:</strong> John Doe</div>
            <div><strong>Last Modified:</strong> 2023-10-27</div>
          </div>
        </div>

        <div class="mt-6 border-t-4 border-black dark:border-gray-700 pt-6">
          <h3 class="text-xl font-bold mb-4 text-black dark:text-white">Actions</h3>
          <div class="flex space-x-4">
            <button class="bg-blue-500 dark:bg-blue-700 hover:bg-blue-700 dark:hover:bg-blue-500 text-white font-bold py-2 px-4 border-b-4 border-black dark:border-gray-900 hover:border-gray-600 dark:hover:border-gray-600 rounded-none transform -skew-x-6 hover:skew-x-0 transition-transform duration-300">Download</button>
            <button class="bg-green-500 dark:bg-green-700 hover:bg-green-700 dark:hover:bg-green-500 text-white font-bold py-2 px-4 border-b-4 border-black dark:border-gray-900 hover:border-gray-600 dark:hover:border-gray-600 rounded-none transform skew-x-6 hover:skew-x-0 transition-transform duration-300">Share</button>
            <button class="bg-red-500 dark:bg-red-700 hover:bg-red-700 dark:hover:bg-red-500 text-white font-bold py-2 px-4 border-b-4 border-black dark:border-gray-900 hover:border-gray-600 dark:hover:border-gray-600 rounded-none transform -rotate-3 hover:rotate-0 transition-transform duration-300">Delete</button>
          </div>
        </div>

         <div class="mt-6 border-t-4 border-black dark:border-gray-700 pt-6">
          <h3 class="text-xl font-bold mb-4 text-black dark:text-white">Comments</h3>
          <div class="space-y-4">
            <div class="bg-gray-100 dark:bg-gray-700 p-4 border-2 border-black dark:border-gray-600 transform rotate-1 hover:rotate-0 transition-transform duration-300">
              <div class="flex items-center mb-2">
                <img class="w-10 h-10 rounded-full mr-4 border-2 border-black dark:border-gray-500" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
                <div class="text-sm">
                  <div class="font-bold text-black dark:text-white">Commenter Name</div>
                  <div class="text-gray-600 dark:text-gray-400 text-xs">2 hours ago</div>
                </div>
              </div>
              <p class="text-gray-800 dark:text-gray-200">This is a sample comment on the file. The Brutalist design elements make it stand out!</p>
            </div>
             <div class="bg-gray-100 dark:bg-gray-700 p-4 border-2 border-black dark:border-gray-600 transform -rotate-1 hover:rotate-0 transition-transform duration-300">
              <div class="flex items-center mb-2">
                <img class="w-10 h-10 rounded-full mr-4 border-2 border-black dark:border-gray-500" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
                <div class="text-sm">
                  <div class="font-bold text-black dark:text-white">Another Commenter</div>
                  <div class="text-gray-600 dark:text-gray-400 text-xs">1 hour ago</div>
                </div>
              </div>
              <p class="text-gray-800 dark:text-gray-200">The pastel colors are a nice touch with the brutalist style.</p>
            </div>
          </div>
           <div class="mt-4">
            <textarea class="w-full p-4 border-2 border-black dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 placeholder-gray-500 dark:placeholder-gray-400 font-mono" rows="4" placeholder="Add a comment..."></textarea>
            <button class="mt-2 bg-purple-500 dark:bg-purple-700 hover:bg-purple-700 dark:hover:bg-purple-500 text-white font-bold py-2 px-4 border-b-4 border-black dark:border-gray-900 hover:border-gray-600 dark:hover:border-gray-600 rounded-none transform skew-y-3 hover:skew-y-0 transition-transform duration-300">Post Comment</button>
          </div>
        </div>

      </div>
    </div>
  </div>
</div>

Categories