Search Components

Social Components

Components related to social interaction and sharing

Social Components Component

A simple, retro/vintage-themed social component inspired by paper/print materials for e-commerce, showcasing a user profile snippet with dark mode support.

Open Preview

                <div class="font-sans p-4 sm:p-6 md:p-8 bg-amber-50 dark:bg-zinc-800 text-stone-800 dark:text-stone-200 min-h-screen">
  <div class="max-w-xs mx-auto bg-amber-100 dark:bg-zinc-700 shadow-md shadow-stone-300 dark:shadow-zinc-900 rounded-lg overflow-hidden border border-amber-200 dark:border-zinc-600 transition-all duration-300 ease-in-out hover:shadow-lg hover:shadow-stone-400 dark:hover:shadow-zinc-950">
    <div class="relative p-4 sm:p-5 border-b border-amber-200 dark:border-zinc-600">
      <div class="flex items-center justify-between">
        <h3 class="text-lg sm:text-xl font-semibold text-stone-700 dark:text-stone-100">User Profile</h3>
        <button aria-label="Settings" class="text-stone-500 dark:text-stone-300 hover:text-stone-700 dark:hover:text-stone-100 transition-colors duration-200">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37a1.724 1.724 0 002.572-1.065z" />
            <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
          </svg>
        </button>
      </div>
    </div>
    <div class="p-4 sm:p-5 flex flex-col items-center">
      <img class="w-24 h-24 sm:w-28 sm:h-28 rounded-full border-4 border-amber-300 dark:border-zinc-500 mb-4 object-cover shadow-sm shadow-stone-300 dark:shadow-zinc-900" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
      <h4 class="text-xl sm:text-2xl font-bold text-stone-700 dark:text-stone-100 mb-1">Jane Doe</h4>
      <p class="text-sm text-stone-500 dark:text-stone-300 mb-4">Verified Buyer</p>
      <div class="flex space-x-4 mb-4">
        <div class="text-center">
          <p class="text-lg font-semibold text-stone-600 dark:text-stone-200">124</p>
          <p class="text-xs text-stone-500 dark:text-stone-400">Followers</p>
        </div>
        <div class="text-center">
          <p class="text-lg font-semibold text-stone-600 dark:text-stone-200">89</p>
          <p class="text-xs text-stone-500 dark:text-stone-400">Following</p>
        </div>
      </div>
      <button class="w-full py-2 px-4 rounded-md bg-rose-500 dark:bg-rose-700 text-white text-base font-medium shadow-sm transition-all duration-200 ease-in-out hover:bg-rose-600 dark:hover:bg-rose-800 focus:outline-none focus:ring-2 focus:ring-rose-400 dark:focus:ring-rose-600 focus:ring-opacity-75">
        View Profile
      </button>
    </div>
    <div class="p-4 sm:p-5 border-t border-amber-200 dark:border-zinc-600 bg-amber-50 dark:bg-zinc-800 text-center">
      <p class="text-xs text-stone-500 dark:text-stone-400">Last active 2 hours ago</p>
    </div>
  </div>
</div>

A simple, elegant social component designed for music and audio platforms with high-contrast color scheme and luxury styling, featuring user profile, followers, and engagement metrics. Fully responsive with dark mode support.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-gray-100 to-white dark:from-gray-900 dark:to-black min-h-screen font-serif text-gray-900 dark:text-gray-100 flex items-center justify-center">
  <div class="w-full max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-[1.01] hover:shadow-2xl relative border border-gray-200 dark:border-gray-700">

    <!-- Background Motif (Optional, for luxury feel) -->
    <div class="absolute inset-0 bg-repeat opacity-5 dark:opacity-[0.02]" style="background-image: url('data:image/svg+xml,%3Csvg width=\'6\' height=\'6\' viewBox=\'0 0 6 6\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'%239C92AC\' fill-opacity=\'0.1\' fill-rule=\'evenodd\'%3E%3Cpath d=\'M0 0h3v3H0V0zm3 3h3v3H3V3z\'/%3E%3C/g%3E%3C/svg%3E');"></div>

    <div class="relative p-6 sm:p-8 md:p-10 z-10">

      <!-- Profile Header -->
      <div class="flex flex-col items-center mb-8">
        <div class="w-28 h-28 rounded-full overflow-hidden mb-4 border-4 border-gray-300 dark:border-gray-600 shadow-lg transform transition-transform duration-300 hover:scale-105">
          <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-full h-full object-cover">
        </div>
        <h2 class="text-3xl font-semibold tracking-wide text-center leading-tight mb-1 text-gray-900 dark:text-gray-100">
          Amelia Lux
        </h2>
        <p class="text-lg text-gray-600 dark:text-gray-400 font-light text-center">
          @amelialuxofficial
        </p>
      </div>

      <!-- Engagement Metrics -->
      <div class="flex justify-around items-center mb-8 gap-4">
        <div class="text-center">
          <p class="text-2xl font-bold text-indigo-700 dark:text-indigo-400 leading-tight">2.1M</p>
          <p class="text-sm text-gray-500 dark:text-gray-400 uppercase tracking-widest">Followers</p>
        </div>
        <div class="text-center">
          <p class="text-2xl font-bold text-indigo-700 dark:text-indigo-400 leading-tight">124</p>
          <p class="text-sm text-gray-500 dark:text-gray-400 uppercase tracking-widest">Following</p>
        </div>
        <div class="text-center">
          <p class="text-2xl font-bold text-indigo-700 dark:text-indigo-400 leading-tight">9.8K</p>
          <p class="text-sm text-gray-500 dark:text-gray-400 uppercase tracking-widest">Likes</p>
        </div>
      </div>

      <!-- Bio/Description (Simple) -->
      <div class="text-center mb-8">
        <p class="text-base text-gray-700 dark:text-gray-300 leading-relaxed">
          Music producer and DJ crafting emotive soundscapes and rhythmic journeys. 
          <span class="block text-sm text-gray-500 dark:text-gray-400 mt-1">Dreaming in melodies.</span>
        </p>
      </div>

      <!-- Call to Action / Interact Buttons -->
      <div class="flex flex-col space-y-4">
        <button class="w-full py-3 px-6 bg-indigo-700 text-white rounded-full text-lg font-medium tracking-wide 
                       hover:bg-indigo-800 dark:bg-indigo-600 dark:hover:bg-indigo-700 transition-colors duration-300 
                       shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 
                       dark:focus:ring-offset-gray-800">
          Follow
        </button>
        <button class="w-full py-3 px-6 border-2 border-indigo-700 text-indigo-700 rounded-full text-lg font-medium tracking-wide 
                       hover:bg-indigo-50 dark:hover:bg-gray-700 dark:text-indigo-400 dark:border-indigo-500 
                       transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 
                       dark:focus:ring-offset-gray-800">
          Message
        </button>
      </div>

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

Social Components Component

A complex, industrial-style social component for booking and reservation systems, featuring cool neutrals, exposed elements, and dark mode support. Designed for appointment and reservation systems.

Open Preview

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 p-4 sm:p-6 lg:p-8 font-sans">
  <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">

    <!-- Left Column: Profile Card & Activity Feed -->
    <div class="md:col-span-1 space-y-6">

      <!-- Profile Card -->
      <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg overflow-hidden transition-all duration-300 transform hover:shadow-xl hover:-translate-y-1">
        <div class="relative h-32 bg-gray-700 dark:bg-gray-950 flex items-center justify-center">
          <img class="w-full h-full object-cover opacity-30" src="https://picsum.photos/600/300?random=1" alt="Cover Image">
          <h2 class="absolute text-xl font-semibold text-gray-100 uppercase tracking-wider">Service Provider</h2>
        </div>
        <div class="p-6 pt-0 text-center -mt-16">
          <img class="w-24 h-24 rounded-full border-4 border-white dark:border-gray-800 inline-block object-cover shadow-md" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile Picture">
          <h3 class="text-2xl font-bold mt-4 text-gray-900 dark:text-gray-100">John Doe</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm">Industrial Design Expert</p>
          <div class="flex justify-center gap-4 mt-4">
            <button class="px-4 py-2 bg-blue-600 hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600 text-white rounded-md text-sm font-medium transition duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
              <svg class="h-4 w-4 inline-block mr-1 -mt-0.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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
              Message
            </button>
            <button class="px-4 py-2 bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-800 dark:text-gray-100 rounded-md text-sm font-medium transition duration-300 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50">
              <svg class="h-4 w-4 inline-block mr-1 -mt-0.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="M17 20h5v-2a3 3 0 00-3-3H8a3 3 0 00-3 3v2H1m16-5h-3M19 8a2 2 0 11-4 0 2 2 0 014 0zM7 12V6a2 2 0 012-2h4a2 2 0 012 2v6m-6 4h6m-6-4H9a2 2 0 00-2 2v4a2 2 0 002 2h4a2 2 0 002-2v-4a2 2 0 00-2-2z"></path></svg>
              Follow
            </button>
          </div>
          <div class="mt-6 grid grid-cols-3 divide-x divide-gray-200 dark:divide-gray-700 text-sm">
            <div>
              <p class="font-semibold text-gray-900 dark:text-gray-100">1.2K</p>
              <p class="text-gray-500 dark:text-gray-400">Followers</p>
            </div>
            <div>
              <p class="font-semibold text-gray-900 dark:text-gray-100">350</p>
              <p class="text-gray-500 dark:text-gray-400">Projects</p>
            </div>
            <div>
              <p class="font-semibold text-gray-900 dark:text-gray-100">4.9/5</p>
              <p class="text-gray-500 dark:text-gray-400">Rating</p>
            </div>
          </div>
        </div>
      </div>

      <!-- Recent Activity Feed -->
      <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg p-6">
        <h3 class="text-lg font-semibold mb-4 text-gray-900 dark:text-gray-100">Recent Activity</h3>
        <div class="space-y-4">
          <div class="flex items-start">
            <img class="w-8 h-8 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
            <div>
              <p class="text-sm text-gray-900 dark:text-gray-100"><span class="font-medium">Sarah M.</span> booked an appointment on <span class="font-medium">Nov 15, 2023</span>.</p>
              <p class="text-xs text-gray-500 dark:text-gray-400">2 hours ago</p>
            </div>
          </div>
          <div class="flex items-start">
            <img class="w-8 h-8 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/men/51.jpg" alt="User Avatar">
            <div>
              <p class="text-sm text-gray-900 dark:text-gray-100"><span class="font-medium">Michael T.</span> left a 5-star review.</p>
              <p class="text-xs text-gray-500 dark:text-gray-400">Yesterday</p>
            </div>
          </div>
          <div class="flex items-start">
            <img class="w-8 h-8 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
            <div>
              <p class="text-sm text-gray-900 dark:text-gray-100"><span class="font-medium">Emily R.</span> confirmed her booking for <span class="font-medium">Dec 1, 2023</span>.</p>
              <p class="text-xs text-gray-500 dark:text-gray-400">3 days ago</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Middle Column: Booking Interface -->
    <div class="md:col-span-2 space-y-6">
      <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg p-6">
        <h3 class="text-2xl font-bold mb-6 text-gray-900 dark:text-gray-100 flex items-center">
          <svg class="w-6 h-6 mr-2 text-blue-600 dark:text-blue-400" 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 7V3m8 4V3m-9 8h.01M10 12h.01M12 16h.01m-6 4h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
          Book Your Appointment
        </h3>

        <!-- Service Selection -->
        <div class="mb-6">
          <label for="service" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Select Service</label>
          <div class="relative">
            <select id="service" name="service" class="block w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm appearance-none pr-8">
              <option value="">Choose a service...</option>
              <option value="consultation">Initial Consultation (60 min)</option>
              <option value="design">Concept Design Review (90 min)</option>
              <option value="prototype">Prototype Feedback Session (45 min)</option>
              <option value="maintenance">Post-Project Maintenance (30 min)</option>
            </select>
            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 dark:text-gray-300">
              <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="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
              </svg>
            </div>
          </div>
        </div>

        <!-- Date Picker (Simplified) -->
        <div class="mb-6">
          <label for="date" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Select Date</label>
          <input type="date" id="date" name="date" class="block w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" min="2023-11-20">
        </div>

        <!-- Time Slots -->
        <div class="mb-6">
          <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Available Time Slots</label>
          <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3">
            <button class="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md text-sm font-medium bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-200 hover:bg-blue-100 dark:hover:bg-gray-700 transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">09:00 AM</button>
            <button class="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md text-sm font-medium bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-200 hover:bg-blue-100 dark:hover:bg-gray-700 transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">10:30 AM</button>
            <button class="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md text-sm font-medium bg-blue-600 dark:bg-blue-700 text-white shadow-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800">11:00 AM</button>
            <button class="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md text-sm font-medium bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-200 hover:bg-blue-100 dark:hover:bg-gray-700 transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">01:00 PM</button>
            <button class="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md text-sm font-medium bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-200 cursor-not-allowed opacity-50">02:30 PM</button>
            <button class="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md text-sm font-medium bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-200 hover:bg-blue-100 dark:hover:bg-gray-700 transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">04:00 PM</button>
          </div>
        </div>

        <!-- Additional Notes -->
        <div class="mb-6">
          <label for="notes" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Additional Notes (optional)</label>
          <textarea id="notes" name="notes" rows="3" class="block w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="Any specific requirements or questions?"></textarea>
        </div>

        <!-- Submit Button -->
        <div class="flex justify-end">
          <button type="submit" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800 transition duration-300">
            <svg class="-ml-1 mr-2 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="M8 7V3m8 4V3m-9 8h.01M10 12h.01M12 16h.01m-6 4h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
            Confirm Booking
          </button>
        </div>
      </div>

      <!-- Other Interactive Elements (e.g., Reviews/Testimonials) -->
      <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg p-6">
        <h3 class="text-lg font-semibold mb-4 text-gray-900 dark:text-gray-100">Client Testimonials</h3>
        <div class="space-y-4">
          <div class="border-b border-gray-200 dark:border-gray-700 pb-4 last:border-b-0">
            <div class="flex items-center mb-2">
              <img class="w-10 h-10 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/women/67.jpg" alt="Client Avatar">
              <div>
                <p class="font-medium text-gray-900 dark:text-gray-100">Jane D.</p>
                <div class="flex text-yellow-400">
                  <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72a1 1 0 01.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                  <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72a1 1 0 01.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                  <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72a1 1 0 01.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                  <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72a1 1 0 01.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                  <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72a1 1 0 01.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                </div>
              </div>
            </div>
            <p class="text-sm text-gray-700 dark:text-gray-300">"John's expertise is unmatched! He helped us streamline our production process. Highly recommend!"</p>
            <p class="text-xs text-gray-500 dark:text-gray-400 mt-2">Reviewed on Nov 10, 2023</p>
          </div>
          <div class="border-b border-gray-200 dark:border-gray-700 pb-4 last:border-b-0">
            <div class="flex items-center mb-2">
              <img class="w-10 h-10 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/men/82.jpg" alt="Client Avatar">
              <div>
                <p class="font-medium text-gray-900 dark:text-gray-100">Robert L.</p>
                <div class="flex text-yellow-400">
                  <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72a1 1 0 01.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                  <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72a1 1 0 01.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                  <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72a1 1 0 01.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                  <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72a1 1 0 01.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                  <svg class="w-4 h-4 text-gray-300 dark:text-gray-600" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72a1 1 0 01.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                </div>
              </div>
            </div>
            <p class="text-sm text-gray-700 dark:text-gray-300">"Great communication and delivered exactly what was promised. A true professional."</p>
            <p class="text-xs text-gray-500 dark:text-gray-400 mt-2">Reviewed on Oct 25, 2023</p>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>

Social Components Component

A simple, responsive social media card for news/journalism content with an industrial aesthetic and autumn color scheme, including dark mode support.

Open Preview

                <div class="bg-stone-100 dark:bg-stone-900 p-4 sm:p-6 lg:p-8 font-sans antialiased text-stone-800 dark:text-stone-200">
  <div class="max-w-xs mx-auto border-2 border-stone-400 dark:border-stone-700 rounded-lg overflow-hidden shadow-lg bg-stone-50 dark:bg-stone-800 transition-colors duration-300">
    <div class="relative">
      <img class="w-full h-32 object-cover object-center" src="https://picsum.photos/400/250?random=1" alt="News Article Cover">
      <span class="absolute top-2 left-2 bg-amber-700 text-amber-50 text-xs px-2 py-1 rounded font-mono uppercase tracking-wide">News</span>
    </div>
    <div class="p-4">
      <h3 class="text-lg font-bold text-amber-800 dark:text-amber-500 mb-2 leading-tight">Headline Connects Community Leaders</h3>
      <p class="text-sm text-stone-600 dark:text-stone-400 mb-4 line-clamp-3">
        Local officials and community organizers gathered today to discuss new initiatives aimed at fostering stronger neighborhood bonds and addressing pressing local issues.
      </p>
      <div class="flex items-center justify-between text-stone-500 dark:text-stone-400 text-xs">
        <div class="flex items-center space-x-2">
          <img class="w-6 h-6 rounded-full border border-stone-300 dark:border-stone-600" src="https://randomuser.me/api/portraits/men/75.jpg" alt="Author Avatar">
          <span class="font-medium">John Doe</span>
        </div>
        <span>Oct 26, 2023</span>
      </div>
    </div>
  </div>
</div>

Social_Components_Component

A responsive and interactive e-commerce social component with a 3D design aesthetic, complementary color scheme, and dark mode support. Features user reviews/testimonials, star ratings, and a 'share' call to action.

Open Preview

                <div class="relative min-h-screen bg-gray-100 p-4 sm:p-8 md:p-12 dark:bg-gray-900 overflow-hidden flex items-center justify-center">

  <!-- Base background (for pseudo-3D effect) -->
  <div class="absolute inset-0 bg-gradient-to-br from-purple-200 to-indigo-100 dark:from-purple-900 dark:to-indigo-800 transform rotate-3 scale-105 rounded-3xl opacity-50 blur-xl"></div>
  <div class="absolute inset-0 bg-gradient-to-tl from-teal-200 to-green-100 dark:from-teal-900 dark:to-green-800 transform -rotate-6 scale-105 rounded-3xl opacity-50 blur-xl"></div>

  <div class="relative z-10 w-full max-w-4xl bg-white bg-opacity-80 dark:bg-gray-800 dark:bg-opacity-80 backdrop-blur-md rounded-3xl shadow-2xl p-6 sm:p-8 md:p-10 border border-t-4 border-l-4 border-purple-300 dark:border-purple-600 transform perspective-1000 rotate-x-6 rotate-y-3 skew-y-1 hover:rotate-x-0 hover:rotate-y-0 hover:skew-y-0 transition-all duration-700 ease-in-out">
    
    <div class="flex flex-col md:flex-row gap-8">

      <!-- Product/Image Section -->
      <div class="w-full md:w-1/2 relative bg-purple-50 dark:bg-purple-950 rounded-2xl p-2 shadow-inner border border-purple-200 dark:border-purple-700 transform rotate-3 translate-x-2 translate-y-1">
        <img src="https://picsum.photos/600/400?random=1" alt="Product Image" class="w-full h-auto object-cover rounded-xl shadow-lg transform -rotate-3 -translate-x-2 -translate-y-1 mx-auto">
        <div class="absolute bottom-2 left-2 right-2 p-2 bg-gradient-to-t from-black/60 to-transparent rounded-b-xl text-white text-sm flex justify-between items-center">
          <span>New Arrivals</span>
          <button class="flex items-center gap-1 text-white hover:text-green-300 transition-colors">
            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>
            Save
          </button>
        </div>
      </div>

      <!-- Social Engagement Section -->
      <div class="w-full md:w-1/2 flex flex-col justify-between gap-6 relative">
        
        <div class="relative p-6 bg-gradient-to-br from-green-50 to-teal-50 dark:from-green-950 dark:to-teal-900 rounded-3xl shadow-xl border border-green-200 dark:border-green-700 transform -rotate-2 -translate-x-1 translate-y-2">
          <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-2 transform -rotate-1 origin-top-left">Customer Reviews</h3>
          
          <!-- Rating Block -->
          <div class="flex items-center mb-4">
            <div class="flex text-yellow-400">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-5 h-5 text-gray-300 dark:text-gray-600" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            </div>
            <span class="ml-2 text-gray-700 dark:text-gray-300 font-semibold">4.5 out of 5</span>
            <a href="#" class="ml-4 text-sm text-purple-600 dark:text-purple-400 hover:underline">Read all 120 reviews</a>
          </div>

          <!-- Individual Review -->
          <div class="bg-white dark:bg-gray-700 p-4 rounded-xl shadow-md border-b-4 border-r-4 border-green-300 dark:border-green-600 transform translate-x-1 translate-y-1">
            <div class="flex items-center mb-3">
              <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-purple-400 dark:border-purple-500 mr-3 shadow-sm">
              <div>
                <p class="font-semibold text-gray-800 dark:text-white">Jane Doe</p>
                <p class="text-xs text-gray-500 dark:text-gray-400">Verified Purchaser</p>
              </div>
            </div>
            <p class="text-gray-700 dark:text-gray-300 italic text-sm mb-2">"Absolutely love this product! The quality is superb and it arrived so quickly."</p>
            <p class="text-xs text-gray-500 dark:text-gray-400 text-right">Reviewed on July 15, 2023</p>
          </div>

        </div>

        <!-- Share and Social Buttons -->
        <div class="relative p-6 bg-gradient-to-br from-indigo-50 to-purple-50 dark:from-indigo-950 dark:to-purple-900 rounded-3xl shadow-xl border border-indigo-200 dark:border-indigo-700 transform rotate-2 translate-x-2 -translate-y-1">
          <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-4 transform rotate-1 origin-top-left">Share & Connect</h3>
          <div class="flex flex-wrap gap-4 justify-center sm:justify-start">
            <button class="flex items-center gap-2 px-5 py-3 bg-purple-600 text-white rounded-full shadow-lg hover:shadow-xl hover:bg-purple-700 transition-all duration-300 transform perspective-1000 rotate-x-6 rotate-y-3 skew-y-1 hover:rotate-x-0 hover:rotate-y-0 hover:skew-y-0">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M16.994 20.29c-.777 0-1.488-.363-1.944-.937-.456-.574-.694-1.309-.694-2.106V11.23a.75.75 0 011.5 0v6.071c0 .484.148.97.447 1.34s.707.57 1.157.57a3.99 3.99 0 003.99-3.99c0-.485-.149-.97-.448-1.34s-.708-.57-1.157-.57h-1.5a.75.75 0 010-1.5h1.5a.75.75 0 01.75.75c0 1.29-.444 2.502-1.282 3.407-.84.904-1.977 1.4-3.193 1.4zm-9.996-3.957A3.99 3.99 0 003 12.29c0-.485.149-.97.448-1.34s.708-.57 1.157-.57h1.5a.75.75 0 010-1.5H4.555a.75.75 0 01-.75-.75c0-1.29.444-2.502 1.282-3.407.84-.904 1.977-1.4 3.193-1.4.777 0 1.488.363 1.944.937.456.574.694 1.309.694 2.106v6.972c0 .484-.148.97-.447 1.34s-.707.57-1.157.57a3.99 3.99 0 00-3.99-3.99z"></path></svg>
              Share Product
            </button>
            <button class="flex items-center gap-2 px-5 py-3 bg-blue-600 text-white rounded-full shadow-lg hover:shadow-xl hover:bg-blue-700 transition-all duration-300 transform perspective-1000 rotate-x-6 rotate-y-3 skew-y-1 hover:rotate-x-0 hover:rotate-y-0 hover:skew-y-0">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M22 6.981a5.61 5.61 0 00-1.637-.446 3.149 3.149 0 01-2.28 1.002.75.75 0 01-.5-.14A5.61 5.61 0 0013 7.825c0-.422-.05-.838-.145-1.243a4.072 4.072 0 00-3.513-3.618 3.189 3.189 0 00-.817-.116 3.978 3.978 0 00-2.81 1.153C4.249 4.908 4 6.136 4 7.424v1.312a.75.75 0 01-.75.75c-1.196 0-2.392 0-3.588 0a.75.75 0 01-.75-.75V7.424C0 6.136.249 4.908.775 3.013A4.043 4.043 0 001.353 2.126a3.978 3.978 0 002.81-1.153C4.249.908 4 1.136 4 2.424v1.312a.75.75 0 01-.75.75c-1.196 0-2.392 0-3.588 0a.75.75 0 01-.75-.75V2.424c0-1.288.249-2.516.775-4.411A4.043 4.043 0 001.353-2.126a3.978 3.978 0 002.81 1.153C4.249-1.908 4-1.136 4-.424v1.312a.75.75 0 01-.75.75c-1.196 0-2.392 0-3.588 0a.75.75 0 01-.75-.75V-.424c0-1.288.249-2.516.775-4.411A4.043 4.043 0 001.353-2.126a3.978 3.978 0 002.81 1.153C4.249-1.908 4-1.136 4-.424v1.312a.75.75 0 01-.75.75c-1.196 0-2.392 0-3.588 0a.75.75 0 01-.75-.75V-.424c0-1.288.249-2.516.775-4.411A4.043 4.043 0 001.353-2.126a3.978 3.978 0 002.81 1.153C4.249-1.908 4-1.136 4-.424v1.312a.75.75 0 01-.75.75c-1.196 0-2.392 0-3.588 0A.75.75 0 010 .681V.681c0 1.288-.249 2.516-.775 4.411A4.043 4.043 0 00-1.353 2.126c-.45-.487-1.026-.78-1.666-.889-.64-.108-1.316-.016-1.928.272-.61.286-1.12.753-1.472 1.341s-.513 1.22-.513 1.905c0 .285.029.566.088.841.059.274.148.539.26.792.112.253.25.495.412.72s.347.43.55.614l.05.044c.484.423.953.79 1.393 1.096.44.306.845.548 1.196.726.35.178.634.3l.865.253a.75.75 0 01.31.07zm-.591 1.242c.45-.487 1.026-.78 1.666-.889.64-.108 1.316-.016 1.928.272.61.286 1.12.753 1.472 1.341s.513 1.22.513 1.905c0 .285-.029.566-.088.841-.059.274-.148.539-.26.792-.112.253-.25.495-.412.72s-.347.43-.55.614l-.05.044c-.484.423-.953.79-1.393 1.096-.44.306-.845.548-1.196.726-.35.178-.634.3l-.865.253a.75.75 0 01-.31.07z"></path></svg>
              Facebook
            </button>
            <button class="flex items-center gap-2 px-5 py-3 bg-red-600 text-white rounded-full shadow-lg hover:shadow-xl hover:bg-red-700 transition-all duration-300 transform perspective-1000 rotate-x-6 rotate-y-3 skew-y-1 hover:rotate-x-0 hover:rotate-y-0 hover:skew-y-0">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M17 2H7c-2.76 0-5 2.24-5 5v10c0 2.76 2.24 5 5 5h10c2.76 0 5-2.24 5-5V7c0-2.76-2.24-5-5-5zm3.78 17H3.22c-.68 0-1.22-.54-1.22-1.22V7c0-.68.54-1.22 1.22-1.22h13.56c.68 0 1.22.54 1.22 1.22v10.78zm-1.89-5.78c-.24-1.07-.63-2.07-1.13-2.98-.59-.8-1.29-1.42-2.16-1.81-.9-.4-1.88-.6-2.98-.63-1.1-.03-2.2.06-3.23.3-1.03.24-1.99.63-2.88 1.13-.8.59-1.42 1.29-1.81 2.16-.4.9-.6 1.88-.63 2.98-.03 1.1.06 2.2.3 3.23.24 1.03.63 1.99 1.13 2.88.59.8 1.29 1.42 2.16 1.81.9.4 1.88.6 2.98.63 1.1.03 2.2-.06 3.23-.3 1.03-.24 1.99-.63 2.88-1.13.8-.59 1.42-1.29 1.81-2.16.4-.9.6-1.88.63-2.98.03-1.1-.06-2.2-.3-3.23zM12 17.5c-3.03 0-5.5-2.47-5.5-5.5S8.97 6.5 12 6.5s5.5 2.47 5.5 5.5-2.47 5.5-5.5 5.5zm.96-8.54l-1.92 1.92v-2.88a.5.5 0 00-1 0v2.88l-1.92-1.92a.5.5 0 00-.71.71l2.5 2.5a.5.5 0 00.71 0l2.5-2.5a.5.5 0 00-.71-.71z"></path></svg>
              Instagram
            </button>
          </div>
        </div>

      </div>
    </div>

    <!-- Bottom Call to Action / Social Proof -->
    <div class="mt-8 text-center bg-gray-50 dark:bg-gray-700 p-6 rounded-2xl shadow-inner border border-gray-200 dark:border-gray-600 transform perspective-1000 rotate-x-3 rotate-y-2 hover:rotate-x-0 hover:rotate-y-0 transition-all duration-700 ease-in-out">
      <p class="text-lg font-semibold text-gray-800 dark:text-white mb-3 tracking-wide transform perspective-1000 rotate-x-3 rotate-y-2">Join thousands of happy customers!</p>
      <button class="px-8 py-4 bg-gradient-to-r from-teal-500 to-green-500 text-white font-bold rounded-full text-xl shadow-lg hover:shadow-xl hover:from-teal-600 hover:to-green-600 transition-all duration-300 ease-in-out uppercase tracking-wider transform perspective-1000 translate-z-10 hover:translate-z-20 scale-105 hover:scale-110">
        Explore More Products
        <span class="ml-2 inline-block transition-transform duration-300 group-hover:translate-x-1">
          &rarr;
        </span>
      </button>
      <p class="text-sm text-gray-500 dark:text-gray-400 mt-3">"Your satisfaction is our priority."</p>
    </div>

     <!-- Small decorative elements -->
     <div class="absolute -top-4 -left-4 w-12 h-12 bg-purple-400 dark:bg-purple-700 rounded-full mix-blend-multiply blur-sm opacity-60 transform translate-z-10 rotate-45"></div>
     <div class="absolute -bottom-4 -right-4 w-16 h-16 bg-teal-400 dark:bg-teal-700 rounded-full mix-blend-multiply blur-sm opacity-60 transform translate-z-10 -rotate-30"></div>

  </div>
</div>

Social Components Component

A social feed component for weather updates, featuring color gradients, triadic colors, and interactive elements. Responsive with dark mode support.

Open Preview

                <div class="min-h-screen py-8 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-cyan-500 via-purple-600 to-rose-500 dark:from-gray-900 dark:via-purple-900 dark:to-pink-900 text-white flex items-center justify-center">
  <div class="max-w-3xl w-full mx-auto bg-white dark:bg-gray-800 rounded-2xl shadow-xl overflow-hidden backdrop-blur-sm bg-opacity-30 dark:bg-opacity-30 border border-white border-opacity-20 dark:border-gray-700">
    <!-- Header -->
    <div class="p-6 sm:p-8 bg-gradient-to-r from-teal-400 via-blue-500 to-purple-600 dark:from-gray-700 dark:via-blue-800 dark:to-purple-800 text-white flex items-center justify-between">
      <h2 class="text-2xl sm:text-3xl font-bold font-sans tracking-wide">Weather Dispatch</h2>
      <div class="flex items-center space-x-3">
        <button class="p-2 rounded-full hover:bg-white hover:bg-opacity-20 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50">
          <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="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 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path></svg>
        </button>
        <img src="https://randomuser.me/api/portraits/men/52.jpg" alt="User Avatar" class="w-9 h-9 rounded-full border-2 border-white object-cover">
      </div>
    </div>

    <!-- Main Content Area -->
    <div class="p-6 sm:p-8 space-y-8 text-gray-800 dark:text-gray-200">

      <!-- New Post Section -->
      <div class="bg-white dark:bg-gray-700 rounded-xl p-5 shadow-lg bg-opacity-70 dark:bg-opacity-70">
        <div class="flex items-center space-x-3 mb-4">
          <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-purple-500 object-cover">
          <div class="flex-1">
            <textarea class="w-full p-3 bg-gray-100 dark:bg-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 dark:focus:ring-purple-400 text-gray-800 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-300 resize-none" rows="2" placeholder="Share your weather observations..."></textarea>
          </div>
        </div>
        <div class="flex justify-between items-center">
          <div class="flex space-x-3">
            <button class="flex items-center text-purple-600 dark:text-purple-400 hover:text-purple-700 dark:hover:text-purple-300 font-medium transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-purple-500 rounded-md p-1">
              <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-4 4 4 4-4V5h-2l-4 4-4-4H4v10zm-4-7a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg>
              Photo
            </button>
            <button class="flex items-center text-purple-600 dark:text-purple-400 hover:text-purple-700 dark:hover:text-purple-300 font-medium transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-purple-500 rounded-md p-1">
              <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path></svg>
              Location
            </button>
          </div>
          <button class="px-5 py-2 bg-purple-600 dark:bg-purple-700 text-white rounded-lg font-semibold hover:bg-purple-700 dark:hover:bg-purple-800 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-purple-500 dark:focus:ring-purple-400 shadow-md">
            Post
          </button>
        </div>
      </div>

      <!-- Weather Forecast Card (Post Example) -->
      <div class="bg-white dark:bg-gray-700 rounded-xl p-5 shadow-lg bg-opacity-70 dark:bg-opacity-70 border border-gray-100 dark:border-gray-600">
        <div class="flex items-center space-x-4 mb-4">
          <img src="https://randomuser.me/api/portraits/women/12.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-pink-500 object-cover">
          <div>
            <p class="font-semibold text-lg">Alice Johnson</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">2 hours ago • New York, USA</p>
          </div>
        </div>
        <p class="text-lg mb-4 leading-relaxed">Current conditions in NYC: mostly sunny with a high of 72°F. Light breeze from the west. Perfect day for a walk in the park! #WeatherNYC #SunnyDays</p>
        <img src="https://picsum.photos/800/450?random=1" alt="Weather Scene" class="w-full h-auto rounded-lg mb-4 object-cover max-h-64">
        <div class="flex justify-between items-center text-gray-600 dark:text-gray-300">
          <div class="flex space-x-4">
            <button class="flex items-center hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-md p-1">
              <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 13.94l-5.11-.99a1 1 0 00-.7-.14l-2.45.42a1 1 0 01-1.07-1.63L13.62 5.3a1 1 0 00-1.74-.9l-3.08 7.21a1 1 0 01-1.84 0L4.38 4.4a1 1 0 00-1.74.9l4.56 8.52a1 1 0 01-1.07 1.63L3.11 13.94a1 1 0 00-.7.14l-2 1a1 1 0 001.37 1.84l2.58-1.29a1 1 0 01.7-.14l2.45.42a1 1 0 001.07-1.63L6.38 5.3a1 1 0 011.74-.9l3.08 7.21a1 1 0 001.84 0l4.56-8.52a1 1 0 00-1.37-1.84l-2.58 1.29a1 1 0 00-.7.14z" clip-rule="evenodd"></path></svg>
              <span class="hidden sm:inline">1.2K</span>
            </button>
            <button class="flex items-center hover:text-green-500 dark:hover:text-green-400 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-green-500 rounded-md p-1">
              <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.707 3.293a1 1 0 010 1.414L5.414 7H11a7 7 0 017 7v2a1 1 0 11-2 0v-2a5 5 0 00-5-5H5.414l2.293 2.293a1 1 0 11-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
              <span class="hidden sm:inline">234</span>
            </button>
            <button class="flex items-center hover:text-red-500 dark:hover:text-red-400 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-red-500 rounded-md p-1">
              <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>
              <span class="hidden sm:inline">57</span>
            </button>
          </div>
          <button class="flex items-center hover:text-purple-500 dark:hover:text-purple-400 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-purple-500 rounded-md p-1">
            <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M15 8a3 3 0 10-2.977-2.977L5.269 9.11A3.001 3.001 0 1010 11.0l4.764-2.91a3 3 0 10-.109-.568l-4.763 2.909-.2-.364-.225-.411zm0 0l.138.688A3 3 0 1015 8z" /></svg>
            <span class="hidden sm:inline">Share</span>
          </button>
        </div>
      </div>

      <!-- Another Post Example (Climate Data) -->
      <div class="bg-white dark:bg-gray-700 rounded-xl p-5 shadow-lg bg-opacity-70 dark:bg-opacity-70 border border-gray-100 dark:border-gray-600">
        <div class="flex items-center space-x-4 mb-4">
          <img src="https://randomuser.me/api/portraits/men/33.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-cyan-500 object-cover">
          <div>
            <p class="font-semibold text-lg">Mark Davis</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">1 day ago • Research Group</p>
          </div>
        </div>
        <p class="text-lg mb-4 leading-relaxed">Our latest climate model shows increased precipitation patterns in the Amazon basin over the next decade. Critical for understanding ecosystem shifts. #ClimateChange #DataScience</p>
        <figure class="mb-4">
          <img src="https://picsum.photos/800/450?random=2" alt="Climate Data Visualization" class="w-full h-auto rounded-lg object-cover max-h-64">
          <figcaption class="text-center text-sm text-gray-500 dark:text-gray-400 mt-2">Projected precipitation in Amazon Basin.</figcaption>
        </figure>
        <div class="flex justify-between items-center text-gray-600 dark:text-gray-300">
          <div class="flex space-x-4">
            <button class="flex items-center hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-md p-1">
              <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 13.94l-5.11-.99a1 1 0 00-.7-.14l-2.45.42a1 1 0 01-1.07-1.63L13.62 5.3a1 1 0 00-1.74-.9l-3.08 7.21a1 1 0 01-1.84 0L4.38 4.4a1 1 0 00-1.74.9l4.56 8.52a1 1 0 01-1.07 1.63L3.11 13.94a1 1 0 00-.7.14l-2 1a1 1 0 001.37 1.84l2.58-1.29a1 1 0 01.7-.14l2.45.42a1 1 0 001.07-1.63L6.38 5.3a1 1 0 011.74-.9l3.08 7.21a1 1 0 001.84 0l4.56-8.52a1 1 0 00-1.37-1.84l-2.58 1.29a1 1 0 00-.7.14z" clip-rule="evenodd"></path></svg>
              <span class="hidden sm:inline">843</span>
            </button>
            <button class="flex items-center hover:text-green-500 dark:hover:text-green-400 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-green-500 rounded-md p-1">
              <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.707 3.293a1 1 0 010 1.414L5.414 7H11a7 7 0 017 7v2a1 1 0 11-2 0v-2a5 5 0 00-5-5H5.414l2.293 2.293a1 1 0 11-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
              <span class="hidden sm:inline">150</span>
            </button>
            <button class="flex items-center hover:text-red-500 dark:hover:text-red-400 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-red-500 rounded-md p-1">
              <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>
              <span class="hidden sm:inline">32</span>
            </button>
          </div>
          <button class="flex items-center hover:text-purple-500 dark:hover:text-purple-400 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-purple-500 rounded-md p-1">
            <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M15 8a3 3 0 10-2.977-2.977L5.269 9.11A3.001 3.001 0 1010 11.0l4.764-2.91a3 3 0 10-.109-.568l-4.763 2.909-.2-.364-.225-.411zm0 0l.138.688A3 3 0 1015 8z" /></svg>
            <span class="hidden sm:inline">Share</span>
          </button>
        </div>
      </div>

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

Social Components Component

A complex, vibrant social component for blog/content pages, focusing on microinteractions with share buttons, likes, comments, and saving. Includes full responsiveness and dark mode support.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-purple-100 to-indigo-200 dark:from-purple-950 dark:to-indigo-950 min-h-screen font-sans antialiased">
  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-2xl shadow-xl overflow-hidden transform transition-all duration-300 hover:shadow-2xl hover:-translate-y-1">
    <div class="p-6 sm:p-8">
      <h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-gray-900 dark:text-white mb-6 leading-tight">
        Exploring the Wonders of Modern Web Development
      </h1>
      <div class="flex items-center space-x-4 mb-8">
        <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Author Avatar" class="w-12 h-12 rounded-full border-4 border-purple-400 dark:border-purple-600 shadow-md transition-transform duration-300 hover:scale-105">
        <div>
          <p class="text-lg font-semibold text-gray-800 dark:text-gray-200">Jane Doe</p>
          <p class="text-sm text-gray-600 dark:text-gray-400">Published on October 26, 2023</p>
        </div>
      </div>

      <img src="https://picsum.photos/800/400?random=1" alt="Article Hero Image" class="w-full h-auto rounded-xl mb-8 shadow-lg transition-transform duration-300 hover:scale-[1.01]">

      <p class="text-base sm:text-lg text-gray-700 dark:text-gray-300 leading-relaxed mb-6">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
      <p class="text-base sm:text-lg text-gray-700 dark:text-gray-300 leading-relaxed mb-8">
        Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
      </p>

      <!-- Social Interaction Buttons -->
      <div class="flex flex-wrap items-center justify-between gap-4 py-4 border-t border-b border-gray-200 dark:border-gray-700 mb-8">
        <div class="flex items-center space-x-4">
          <!-- Like Button -->
          <button class="flex items-center space-x-2 p-3 rounded-full bg-red-100 dark:bg-red-900 text-red-600 dark:text-red-300 hover:bg-red-200 dark:hover:bg-red-800 transition-all duration-300 transform hover:scale-110 active:scale-95 focus:outline-none focus:ring-4 focus:ring-red-300 dark:focus:ring-red-700 group">
            <svg class="w-6 h-6 fill-current group-hover:animate-bounce" viewBox="0 0 24 24" fill="currentColor">
              <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
            </svg>
            <span class="font-semibold text-lg">2.1K</span>
          </button>
          <!-- Comment Button -->
          <button class="flex items-center space-x-2 p-3 rounded-full bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-300 hover:bg-blue-200 dark:hover:bg-blue-800 transition-all duration-300 transform hover:scale-110 active:scale-95 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-700 group">
            <svg class="w-6 h-6 fill-current group-hover:rotate-6" viewBox="0 0 24 24" fill="currentColor">
              <path d="M21.99 4c0-1.1-.89-2-1.99-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4-.01-18z"/>
            </svg>
            <span class="font-semibold text-lg">145</span>
          </button>
          <!-- Save Button -->
          <button class="flex items-center space-x-2 p-3 rounded-full bg-green-100 dark:bg-green-900 text-green-600 dark:text-green-300 hover:bg-green-200 dark:hover:bg-green-800 transition-all duration-300 transform hover:scale-110 active:scale-95 focus:outline-none focus:ring-4 focus:ring-green-300 dark:focus:ring-green-700 group">
            <svg class="w-6 h-6 fill-current group-hover:animate-wiggle" viewBox="0 0 24 24" fill="currentColor">
              <path d="M17 3H7c-1.1 0-2 .9-2 2v16l7-3 7 3V5c0-1.1-.9-2-2-2z"/>
            </svg>
            <span class="font-semibold text-lg">Save</span>
          </button>
        </div>

        <!-- Share Buttons -->
        <div class="flex flex-wrap items-center gap-3">
          <button class="p-3 rounded-full bg-purple-100 dark:bg-purple-900 text-purple-600 dark:text-purple-300 hover:bg-purple-200 dark:hover:bg-purple-800 transition-all duration-300 transform hover:scale-110 active:scale-95 focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-700 group">
            <svg class="w-6 h-6 fill-current group-hover:rotate-12" viewBox="0 0 24 24" fill="currentColor"><path d="M18 2h-3v7h3V2zM15 12H9v7h6v-7zM21 7h-3v14h3V7zM6 9H3v12h3V9zM0 0h24v24H0z" fill="none"></path><path d="M18 2h-3v7h3V2zM15 12H9v7h6v-7zM21 7h-3v14h3V7zM6 9H3v12h3V9z"/></svg>
          </button>
          <button class="p-3 rounded-full bg-purple-100 dark:bg-purple-900 text-purple-600 dark:text-purple-300 hover:bg-purple-200 dark:hover:bg-purple-800 transition-all duration-300 transform hover:scale-110 active:scale-95 focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-700 group">
            <svg class="w-6 h-6 fill-current group-hover:animate-pulse" viewBox="0 0 24 24" fill="currentColor"><path d="M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.37-.83.49-1.75.83-2.72 1.02C18.35 4.34 17.2 4 16 4c-4.07 0-7.38 3.31-7.38 7.39 0 .58.07 1.15.2 1.7C8.04 12.13 4.97 10.5 2.55 7.94c-.62 1.05-.98 2.27-.98 3.58 0 2.55 1.3 4.81 3.28 6.13-1.21-.04-2.35-.37-3.34-.92v.09c0 3.58 2.54 6.57 5.91 7.27-.6.16-1.24.24-1.9.24-.46 0-.91-.04-1.34-.13.94 2.93 3.65 5.07 6.89 5.13-2.52 1.98-5.71 3.17-9.17 3.17-1.12 0-2.22-.07-3.29-.19C2.7 20.3 6.64 22 11 22c10.45 0 16.15-8.62 16.15-16.15 0-.25-.01-.5-.02-.75.83-.6 1.56-1.35 2.13-2.2Zm-5.32 3.17c-.3-.21-.6-.4-.9-.58c-1.2-.7-2.61-1.14-4.1-1.14-1.57 0-2.91.56-4.04 1.63-1.13 1.07-1.79 2.52-1.79 4.09 0 1.57.66 3.02 1.79 4.09 1.13 1.07 2.47 1.63 4.04 1.63 1.57 0 2.91-.56 4.04-1.63 1.13-1.07 1.79-2.52 1.79-4.09 0-1.57-.66-3.02-1.79-4.09Z"></path></svg>
          </button>
          <button class="p-3 rounded-full bg-purple-100 dark:bg-purple-900 text-purple-600 dark:text-purple-300 hover:bg-purple-200 dark:hover:bg-purple-800 transition-all duration-300 transform hover:scale-110 active:scale-95 focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-700 group">
            <svg class="w-6 h-6 fill-current group-hover:animate-spin-slow" viewBox="0 0 24 24" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M20.5 4.5H3.5c-.83 0-1.5.67-1.5 1.5v12c0 .83.67 1.5 1.5 1.5h17c.83 0 1.5-.67 1.5-1.5V6c0-.83-.67-1.5-1.5-1.5zm-5 13.5H9c-.55 0-1-.45-1-1s.45-1 1-1h6c.55 0 1 .45 1 1s-.45 1-1 1zm4-7H4v-3c0-.55-.45-1-1-1s-1 .45-1 1v3H0v-3C0 4.19 1.19 3 2.65 3h18.7c1.46 0 2.65 1.19 2.65 2.65v3h-4V7z"/></svg>
          </button>
        </div>
      </div>

      <!-- Comments Section -->
      <div class="mt-8">
        <h2 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white mb-6">Comments (3)</h2>

        <!-- Comment 1 -->
        <div class="flex items-start space-x-4 mb-6 p-4 rounded-xl bg-gray-50 dark:bg-gray-700 shadow-md transition-all duration-300 hover:shadow-lg">
          <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Commenter Avatar" class="w-10 h-10 rounded-full border-2 border-indigo-400 dark:border-indigo-600">
          <div>
            <p class="font-semibold text-gray-800 dark:text-gray-200">John Smith <span class="text-xs font-normal text-gray-500 dark:text-gray-400 ml-2">2 hours ago</span></p>
            <p class="text-gray-700 dark:text-gray-300 mt-1">This article is truly insightful! I learned so much about modern web development. Great job!</p>
            <button class="text-sm text-purple-600 dark:text-purple-400 hover:underline mt-2">Reply</button>
          </div>
        </div>

        <!-- Comment 2 -->
        <div class="flex items-start space-x-4 mb-6 p-4 rounded-xl bg-gray-50 dark:bg-gray-700 shadow-md transition-all duration-300 hover:shadow-lg">
          <img src="https://randomuser.me/api/portraits/women/22.jpg" alt="Commenter Avatar" class="w-10 h-10 rounded-full border-2 border-indigo-400 dark:border-indigo-600">
          <div>
            <p class="font-semibold text-gray-800 dark:text-gray-200">Alice Johnson <span class="text-xs font-normal text-gray-500 dark:text-gray-400 ml-2">Yesterday</span></p>
            <p class="text-gray-700 dark:text-gray-300 mt-1">Fantastic read! The examples were very helpful. Looking forward to more content like this.</p>
            <button class="text-sm text-purple-600 dark:text-purple-400 hover:underline mt-2">Reply</button>
          </div>
        </div>

        <!-- Comment 3 (Nested Reply) -->
        <div class="ml-14 flex items-start space-x-4 p-4 rounded-xl bg-gray-100 dark:bg-gray-750 shadow-md transition-all duration-300 hover:shadow-lg">
          <img src="https://randomuser.me/api/portraits/men/7.jpg" alt="Commenter Avatar" class="w-10 h-10 rounded-full border-2 border-indigo-400 dark:border-indigo-600">
          <div>
            <p class="font-semibold text-gray-800 dark:text-gray-200">Bob Williams <span class="text-xs font-normal text-gray-500 dark:text-gray-400 ml-2">1 hour ago</span></p>
            <p class="text-gray-700 dark:text-gray-300 mt-1">@Alice Johnson: Agreed! Especially the part about responsiveness. Super important.</p>
            <button class="text-sm text-purple-600 dark:text-purple-400 hover:underline mt-2">Reply</button>
          </div>
        </div>


        <form class="mt-8">
          <textarea class="w-full p-4 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white focus:ring-2 focus:ring-purple-500 dark:focus:ring-purple-400 focus:border-transparent dark:focus:border-transparent resize-y min-h-[100px] transition-all duration-200" placeholder="Write your comment here..."></textarea>
          <button type="submit" class="mt-4 px-6 py-3 bg-gradient-to-r from-purple-500 to-indigo-600 dark:from-purple-600 dark:to-indigo-700 text-white font-bold rounded-lg shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 transition-all duration-300 focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-800">
            Post Comment
          </button>
        </form>
      </div>
    </div>
  </div>
</div>

<style>
  /* Keyframe animations for microinteractions */
  @keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
  }

  .group-hover\:animate-bounce:hover {
    animation: bounce 0.6s ease-in-out infinite;
  }

  @keyframes rotate-6 {
    from { transform: rotate(0deg); }
    to { transform: rotate(6deg); }
  }

  .group-hover\:rotate-6:hover {
    animation: rotate-6 0.3s forwards;
  }

  @keyframes wiggle {
    0%, 7% { transform: rotate(0); }
    15% { transform: rotate(-10deg); }
    20% { transform: rotate(5deg); }
    25% { transform: rotate(-5deg); }
    30% { transform: rotate(0); }
    100% { transform: rotate(0); }
  }

  .group-hover\:animate-wiggle:hover {
    animation: wiggle 0.6s ease-in-out infinite;
  }

  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .7; }
  }

  .group-hover\:animate-pulse:hover {
    animation: pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

  @keyframes spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  .group-hover\:animate-spin-slow:hover {
    animation: spin-slow 2s linear infinite;
  }

  /* Add more specific override for group-hover if Tailwind's default is not applying correctly */
  /* For example, for the rotate-12 on share buttons */
  /* .group:hover svg.group-hover\:rotate-12 { transform: rotate(12deg); } */
</style>

Social_Components_Documentation_Wiki

A complex, responsive social component for documentation/wiki sites, featuring autumn color gradients and smooth transitions with dark mode support.

Open Preview

                <div class="min-h-screen bg-gradient-to-br from-amber-100 via-orange-200 to-red-200 dark:from-stone-900 dark:via-red-950 dark:to-orange-950 p-4 sm:p-6 lg:p-8 font-sans transition-colors duration-500">
  <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">

    <!-- Left Sidebar: Profile/Navigation -->
    <aside class="md:col-span-1">
      <div class="bg-white dark:bg-stone-800 rounded-3xl shadow-xl p-6 mb-6 transform transition duration-300 hover:scale-[1.01] hover:shadow-2xl">
        <div class="flex items-center space-x-4 mb-6">
          <img class="w-20 h-20 rounded-full object-cover ring-4 ring-amber-400 dark:ring-red-600 shadow-lg" src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar">
          <div>
            <h2 class="text-2xl font-bold text-stone-800 dark:text-stone-100">John Doe</h2>
            <p class="text-sm text-stone-600 dark:text-stone-300">Documentation Manager</p>
          </div>
        </div>
        <nav class="space-y-3">
          <a href="#" class="flex items-center p-3 rounded-lg text-lg font-medium text-stone-700 dark:text-stone-200 bg-amber-100 dark:bg-red-800 transition-all duration-300 hover:bg-amber-200 dark:hover:bg-red-700 hover:text-orange-800 dark:hover:text-amber-100 group">
            <svg class="w-6 h-6 mr-3 text-amber-600 dark:text-amber-400 group-hover:text-orange-700 dark:group-hover:text-amber-200" 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="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001 1h3v-3m-3 3h4m-re-6 0c0 4.418 7.84 8 13 8s13-3.582 13-8"></path></svg>
            My Wiki
          </a>
          <a href="#" class="flex items-center p-3 rounded-lg text-lg font-medium text-stone-700 dark:text-stone-200 transition-all duration-300 hover:bg-amber-100 dark:hover:bg-red-800 hover:text-orange-800 dark:hover:text-amber-100 group">
            <svg class="w-6 h-6 mr-3 text-stone-500 dark:text-stone-400 group-hover:text-orange-700 dark:group-hover:text-amber-200" 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.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
            Recent Activity
          </a>
          <a href="#" class="flex items-center p-3 rounded-lg text-lg font-medium text-stone-700 dark:text-stone-200 transition-all duration-300 hover:bg-amber-100 dark:hover:bg-red-800 hover:text-orange-800 dark:hover:text-amber-100 group">
            <svg class="w-6 h-6 mr-3 text-stone-500 dark:text-stone-400 group-hover:text-orange-700 dark:group-hover:text-amber-200" 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="M17 20h2a2 2 0 002-2V8a2 2 0 00-2-2h-2M13 18v2a2 2 0 002 2h2a2 2 0 002-2v-2M9 18H5a2 2 0 01-2-2V8a2 2 0 012-2h2M11 5H9a2 2 0 00-2 2v2M12 12v.01"></path></svg>
            Settings
          </a>
        </nav>
      </div>

      <!-- Recommended Articles -->
      <div class="bg-white dark:bg-stone-800 rounded-3xl shadow-xl p-6 transform transition duration-300 hover:scale-[1.01] hover:shadow-2xl">
        <h3 class="text-xl font-bold text-stone-800 dark:text-stone-100 mb-4">Trending Articles</h3>
        <ul class="space-y-4">
          <li class="flex items-start">
            <span class="text-orange-500 dark:text-amber-400 font-bold text-lg mr-3">1.</span>
            <div>
              <a href="#" class="text-stone-700 dark:text-stone-200 font-medium text-base hover:text-orange-600 dark:hover:text-amber-300 transition-colors duration-200 leading-tight">Understanding API Integrations v3.0</a>
              <p class="text-sm text-stone-500 dark:text-stone-400">5 min read</p>
            </div>
          </li>
          <li class="flex items-start">
            <span class="text-orange-500 dark:text-amber-400 font-bold text-lg mr-3">2.</span>
            <div>
              <a href="#" class="text-stone-700 dark:text-stone-200 font-medium text-base hover:text-orange-600 dark:hover:text-amber-300 transition-colors duration-200 leading-tight">Getting Started with Microservices</a>
              <p class="text-sm text-stone-500 dark:text-stone-400">12 min read</p>
            </div>
          </li>
          <li class="flex items-start">
            <span class="text-orange-500 dark:text-amber-400 font-bold text-lg mr-3">3.</span>
            <div>
              <a href="#" class="text-stone-700 dark:text-stone-200 font-medium text-base hover:text-orange-600 dark:hover:text-amber-300 transition-colors duration-200 leading-tight">Best Practices for Secure Coding</a>
              <p class="text-sm text-stone-500 dark:text-stone-400">8 min read</p>
            </div>
          </li>
        </ul>
      </div>
    </aside>

    <!-- Main Content Area: Feed/Articles -->
    <main class="md:col-span-2">
      <!-- Search Bar -->
      <div class="mb-6">
        <label for="search" class="sr-only">Search wiki...</label>
        <div class="relative">
          <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
            <svg class="h-5 w-5 text-gray-400" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
            </svg>
          </div>
          <input type="search" id="search" class="block w-full pl-10 pr-3 py-3 rounded-full border border-transparent bg-white dark:bg-stone-800 text-stone-900 dark:text-stone-100 placeholder-stone-500 dark:placeholder-stone-400 shadow-lg focus:outline-none focus:ring-2 focus:ring-orange-500 dark:focus:ring-amber-600 focus:border-transparent transition-all duration-300" placeholder="Search documentation...">
        </div>
      </div>

      <!-- Feed/Article Cards -->
      <section class="space-y-6">

        <!-- Article Card 1 -->
        <article class="bg-white dark:bg-stone-800 rounded-3xl shadow-xl p-6 transform transition duration-300 hover:scale-[1.01] hover:shadow-2xl overflow-hidden relative group">
          <span class="absolute top-0 right-0 bg-orange-500 dark:bg-red-700 text-white text-xs px-3 py-1 rounded-bl-lg font-bold uppercase z-10">New</span>
          <div class="flex items-start space-x-4 mb-4">
            <img class="w-14 h-14 rounded-full object-cover shadow-md ring-2 ring-orange-200" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Author Avatar">
            <div>
              <h3 class="text-xl font-bold text-stone-800 dark:text-stone-100">How to contribute to our Wiki</h3>
              <p class="text-sm text-stone-600 dark:text-stone-300">By <a href="#" class="font-medium text-orange-600 dark:text-amber-400 hover:underline">Jane Smith</a> · October 26, 2023</p>
            </div>
          </div>
          <figure class="mb-4 rounded-xl overflow-hidden shadow-lg border border-gray-100 dark:border-stone-700">
            <img class="w-full h-48 object-cover transform scale-105 group-hover:scale-100 transition duration-500 ease-in-out" src="https://picsum.photos/800/400?random=1" alt="Article Image">
          </figure>
          <p class="text-stone-700 dark:text-stone-200 mb-4 leading-relaxed line-clamp-3">Learn the step-by-step process of adding, editing, and managing content effectively within our knowledge base. This guide covers everything from basic formatting to advanced topic structuring... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          <div class="flex justify-between items-center">
            <a href="#" class="inline-flex items-center px-4 py-2 bg-gradient-to-r from-orange-400 to-red-500 dark:from-red-700 dark:to-orange-800 text-white font-semibold rounded-full shadow-md hover:shadow-lg transform hover:scale-105 transition-all duration-300">
              Read More
              <svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10 4.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
            </a>
            <div class="flex space-x-4">
              <button class="flex items-center text-stone-600 dark:text-stone-300 hover:text-orange-600 dark:hover:text-amber-400 transition-colors duration-200">
                <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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
                <span>45</span>
              </button>
              <button class="flex items-center text-stone-600 dark:text-stone-300 hover:text-orange-600 dark:hover:text-amber-400 transition-colors duration-200">
                <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="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"></path></svg>
                <span>12</span>
              </button>
            </div>
          </div>
        </article>

        <!-- Article Card 2 -->
        <article class="bg-white dark:bg-stone-800 rounded-3xl shadow-xl p-6 transform transition duration-300 hover:scale-[1.01] hover:shadow-2xl overflow-hidden relative group">
          <div class="flex items-start space-x-4 mb-4">
            <img class="w-14 h-14 rounded-full object-cover shadow-md ring-2 ring-orange-200" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Author Avatar">
            <div>
              <h3 class="text-xl font-bold text-stone-800 dark:text-stone-100">Understanding Database Normalization</h3>
              <p class="text-sm text-stone-600 dark:text-stone-300">By <a href="#" class="font-medium text-orange-600 dark:text-amber-400 hover:underline">Michael Brown</a> · October 20, 2023</p>
            </div>
          </div>
          <figure class="mb-4 rounded-xl overflow-hidden shadow-lg border border-gray-100 dark:border-stone-700">
            <img class="w-full h-48 object-cover transform scale-105 group-hover:scale-100 transition duration-500 ease-in-out" src="https://picsum.photos/800/400?random=2" alt="Article Image">
          </figure>
          <p class="text-stone-700 dark:text-stone-200 mb-4 leading-relaxed line-clamp-3">Delve into the principles of database normalization (1NF, 2NF, 3NF, BCNF) and learn how to design efficient, consistent, and reliable database schemas. This article provides practical examples and best practices... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          <div class="flex justify-between items-center">
            <a href="#" class="inline-flex items-center px-4 py-2 bg-gradient-to-r from-orange-400 to-red-500 dark:from-red-700 dark:to-orange-800 text-white font-semibold rounded-full shadow-md hover:shadow-lg transform hover:scale-105 transition-all duration-300">
              Read More
              <svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10 4.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
            </a>
            <div class="flex space-x-4">
              <button class="flex items-center text-stone-600 dark:text-stone-300 hover:text-orange-600 dark:hover:text-amber-400 transition-colors duration-200">
                <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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
                <span>68</span>
              </button>
              <button class="flex items-center text-stone-600 dark:text-stone-300 hover:text-orange-600 dark:hover:text-amber-400 transition-colors duration-200">
                <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="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"></path></svg>
                <span>25</span>
              </button>
            </div>
          </div>
        </article>

        <!-- Article Card 3 -->
        <article class="bg-white dark:bg-stone-800 rounded-3xl shadow-xl p-6 transform transition duration-300 hover:scale-[1.01] hover:shadow-2xl overflow-hidden relative group">
          <div class="flex items-start space-x-4 mb-4">
            <img class="w-14 h-14 rounded-full object-cover shadow-md ring-2 ring-orange-200" src="https://randomuser.me/api/portraits/women/67.jpg" alt="Author Avatar">
            <div>
              <h3 class="text-xl font-bold text-stone-800 dark:text-stone-100">Implementing CI/CD Pipelines with Jenkins</h3>
              <p class="text-sm text-stone-600 dark:text-stone-300">By <a href="#" class="font-medium text-orange-600 dark:text-amber-400 hover:underline">Sarah Johnson</a> · October 15, 2023</p>
            </div>
          </div>
          <figure class="mb-4 rounded-xl overflow-hidden shadow-lg border border-gray-100 dark:border-stone-700">
            <img class="w-full h-48 object-cover transform scale-105 group-hover:scale-100 transition duration-500 ease-in-out" src="https://picsum.photos/800/400?random=3" alt="Article Image">
          </figure>
          <p class="text-stone-700 dark:text-stone-200 mb-4 leading-relaxed line-clamp-3">Explore the essentials of Continuous Integration and Continuous Deployment using Jenkins. This comprehensive guide covers setup, pipeline creation, and advanced configurations for automated software delivery... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          <div class="flex justify-between items-center">
            <a href="#" class="inline-flex items-center px-4 py-2 bg-gradient-to-r from-orange-400 to-red-500 dark:from-red-700 dark:to-orange-800 text-white font-semibold rounded-full shadow-md hover:shadow-lg transform hover:scale-105 transition-all duration-300">
              Read More
              <svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10 4.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
            </a>
            <div class="flex space-x-4">
              <button class="flex items-center text-stone-600 dark:text-stone-300 hover:text-orange-600 dark:hover:text-amber-400 transition-colors duration-200">
                <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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
                <span>51</span>
              </button>
              <button class="flex items-center text-stone-600 dark:text-stone-300 hover:text-orange-600 dark:hover:text-amber-400 transition-colors duration-200">
                <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="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"></path></svg>
                <span>18</span>
              </button>
            </div>
          </div>
        </article>

      </section>
    </main>

  </div>
</div>

Glassmorphism Social Card

A simple, responsive glassmorphism social card component with pastel colors and dark mode support, suitable for dashboard interfaces.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-100 via-pink-100 to-blue-100 dark:from-gray-900 dark:via-purple-950 dark:to-blue-950 p-4">
  <div class="relative w-full max-w-sm overflow-hidden rounded-xl shadow-lg backdrop-blur-md border border-white border-opacity-30 bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-30 dark:border-gray-700 dark:border-opacity-50 p-6 flex flex-col items-center text-center">
    <!-- Frosted Glass Effect -->
    <div class="absolute inset-0 bg-white bg-opacity-10 dark:bg-gray-700 dark:bg-opacity-10 pointer-events-none transform -skew-y-3 scale-150"></div>

    <div class="relative z-10">
      <img class="w-24 h-24 rounded-full border-4 border-white border-opacity-40 shadow-md transform transition-transform duration-300 hover:scale-105" src="https://randomuser.me/api/portraits/women/15.jpg" alt="User Avatar">
      <h3 class="mt-4 text-xl font-semibold text-gray-800 dark:text-gray-100">Alice Johnson</h3>
      <p class="text-sm text-gray-600 dark:text-gray-300">Frontend Developer</p>

      <div class="flex justify-center space-x-4 mt-5">
        <a href="#" class="text-purple-600 hover:text-purple-800 dark:text-purple-300 dark:hover:text-purple-500 transition-colors duration-200">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.47.087.686-.208.686-.464 0-.232-.005-.865-.011-1.696-2.793.602-3.393-1.341-3.393-1.341-.454-1.156-1.11-1.46-1.11-1.46-.908-.619.069-.605.069-.605 1.004.07 1.532 1.03 1.532 1.03.892 1.529 2.341 1.089 2.91.833.091-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.931 0-1.091.39-1.984 1.029-2.682-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.025.798-.222 1.637-.333 2.475-.337.838.004 1.677.115 2.475.337 1.909-1.295 2.747-1.025 2.747-1.025.546 1.379.202 2.398.099 2.65.64.698 1.028 1.591 1.028 2.682 0 3.829-2.339 4.673-4.566 4.92.359.307.678.915.678 1.846 0 1.334-.012 2.41-.012 2.737 0 .259.208.567.694.463C21.133 20.19 24 16.425 24 12.017 24 6.484 19.522 2 14 2h-2z"/>
          </svg>
        </a>
        <a href="#" class="text-blue-500 hover:text-blue-700 dark:text-blue-300 dark:hover:text-blue-500 transition-colors duration-200">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M19.633 7.997c-.013-.306-.026-.61-.048-.914-.078-1.066-1.062-2.05-2.128-2.128-.304-.022-.608-.035-.914-.048-1.503-.06-3.007-.06-4.51 0-1.503.06-3.007.06-4.51 0-.306.013-.61.026-.914.048-1.066.078-2.05 1.062-2.128 2.128-.078.304-.09.608-.103.914-.047 1.503-.047 3.007 0 4.51.013.306.026.61.048.914.078 1.066 1.062 2.05 2.128 2.128.304.022.608.035.914.048 1.503.06 3.007.06 4.51 0 1.503-.06 3.007-.06 4.51 0 .306-.013.61-.026.914-.048 1.066-.078 2.05-1.062 2.128-2.128.078-.304.09-.608.103-.914.047-1.503.047-3.007 0-4.51zm-2.106-3.844c.484 0 .878.394.878.878s-.394.878-.878.878-.878-.394-.878-.878.394-.878.878-.878zM12 9.098c-1.603 0-2.902 1.299-2.902 2.902s1.299 2.902 2.902 2.902 2.902-1.299 2.902-2.902-1.299-2.902-2.902-2.902z"/>
          </svg>
        </a>
        <a href="#" class="text-cyan-600 hover:text-cyan-800 dark:text-cyan-300 dark:hover:text-cyan-500 transition-colors duration-200">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M18.273 2.043l-4.512 8.799H9.421L4.898 2.043H2.5A.5.5 0 002 2.543v18.736a.5.5 0 00.5.5h2.247a.5.5 0 00.5-.5V12.72L10.37 21.057h3.94l4.985-8.318v7.62a.5.5 0 00.5.5h2.247a.5.5 0 00.5-.5V2.543a.5.5 0 00-.5-.5h-2.247a.5.5 0 00-.5.5v7.05h-.002l-4.636-7.05h-2.738z"/>
          </svg>
        </a>
      </div>

      <div class="mt-6 flex justify-around w-full">
        <div class="p-2">
          <p class="text-lg font-bold text-gray-800 dark:text-gray-100">1.2K</p>
          <p class="text-sm text-gray-600 dark:text-gray-300">Followers</p>
        </div>
        <div class="p-2">
          <p class="text-lg font-bold text-gray-800 dark:text-gray-100">350</p>
          <p class="text-sm text-gray-600 dark:text-gray-300">Following</p>
        </div>
      </div>
    </div>
  </div>
</div>

Social Components Component

A simple, responsive social components section for a dashboard, featuring a monochromatic color scheme and Skeuomorphism-inspired design.

Open Preview

                <div class="p-4 bg-gray-200 dark:bg-gray-800 shadow-xl rounded-lg">
  <h2 class="text-xl font-bold mb-4 text-gray-800 dark:text-gray-200">Social Feed</h2>
  <div class="space-y-4">
    <!-- Post 1 -->
    <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md">
      <div class="flex items-center mb-2">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-500 mr-3">
        <div>
          <p class="font-semibold text-gray-900 dark:text-gray-100">John Doe</p>
          <p class="text-sm text-gray-600 dark:text-gray-400">2 hours ago</p>
        </div>
      </div>
      <p class="text-gray-800 dark:text-gray-200 mb-3">Exploring the new dashboard features! Really intuitive and clean design. #dashboard #UIUX</p>
      <img src="https://picsum.photos/400/200?random=1" alt="Post Image" class="w-full rounded-md shadow-inner mb-2">
      <div class="flex justify-between text-gray-600 dark:text-gray-400 text-sm">
        <span>❤️ 23 Likes</span>
        <span>💬 5 Comments</span>
      </div>
    </div>

    <!-- Post 2 -->
    <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md">
      <div class="flex items-center mb-2">
        <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-500 mr-3">
        <div>
          <p class="font-semibold text-gray-900 dark:text-gray-100">Jane Smith</p>
          <p class="text-sm text-gray-600 dark:text-gray-400">Yesterday</p>
        </div>
      </div>
      <p class="text-gray-800 dark:text-gray-200 mb-3">Just launched my new project! Check it out in the updated dashboard. Let me know your thoughts! #projectlaunch #dashboard</p>
      <div class="flex justify-between text-gray-600 dark:text-gray-400 text-sm">
        <span>❤️ 45 Likes</span>
        <span>💬 12 Comments</span>
      </div>
    </div>

    <!-- Post 3 -->
    <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md">
      <div class="flex items-center mb-2">
        <img src="https://randomuser.me/api/portraits/men/20.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-500 mr-3">
        <div>
          <p class="font-semibold text-gray-900 dark:text-gray-100">Peter Jones</p>
          <p class="text-sm text-gray-600 dark:text-gray-400">3 days ago</p>
        </div>
      </div>
      <p class="text-gray-800 dark:text-gray-200 mb-3">The new analytics module in the dashboard is a game-changer! So much data presented clearly. Highly recommend! #analytics #datadriven</p>
      <img src="https://picsum.photos/400/200?random=2" alt="Post Image" class="w-full rounded-md shadow-inner mb-2">
      <div class="flex justify-between text-gray-600 dark:text-gray-400 text-sm">
        <span>❤️ 60 Likes</span>
        <span>💬 8 Comments</span>
      </div>
    </div>
  </div>
</div>

Search Components

Categories

Social Components