Home
Rajesh Maheshwari
Beautiful and Responsive Card Component

Beautiful and Responsive Card Component

Modern, professional and responsive card component for the blog/services/info

This tailwind example is contributed by Rajesh Maheshwari, on 27-Feb-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Article Card, Blog page card, Article card

Card Blog Card

Author Rajesh Maheshwari

Fork Fullscreen

<div class="max-w-sm mx-auto bg-white rounded-2xl shadow-2xl overflow-hidden transform transition-all ">

<div class="relative">
      
      <div class="card-image h-72 bg-cover bg-center"
        style="background-image: url('https://images.unsplash.com/photo-1494438639946-1ebd1d20bf85?q=80&w=2067&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');">
        
        <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-50"></div>
        <div class="absolute inset-0 p-6 flex flex-col justify-end">
          <h2 class="text-3xl font-bold text-white leading-tight">Innovating Tomorrow</h2>
          <p class="text-lg text-white opacity-80">Shaping the future of technology with creativity.</p>
        </div>
      </div>
    </div>

<div class="p-6 bg-white space-y-4">
      <h3 class="text-2xl font-semibold text-gray-800">Design Beyond Imagination</h3>
      <p class="text-gray-600 text-sm leading-relaxed">
        Our design philosophy revolves around simplicity and functionality. By blending creativity with cutting-edge
        technology, we bring ideas to life that leave a lasting impact. Explore the future of design with us.
      </p>

<div class="flex justify-between items-center">
        <button class="bg-green-800 text-white py-2 px-6 rounded-full text-sm font-medium shadow-md hover:bg-green-900 hover:shadow-xl transition-all transform flex items-center">
          Learn More
        </button>
        <span class="text-sm text-gray-500">Last updated: 2 mins ago</span>
      </div>
    </div>
  </div>

</body>

Related Examples