VibeCoderzVibeCoderz
Telegram
All Prompts
Service Card with Icon and Hover Effects preview
cardinteractivehoverresponsivetailwindlinkserviceicon

Service Card with Icon and Hover Effects

Интерактивная карточка сервиса с иконкой, заголовком и ссылкой. Адаптивный дизайн, эффекты при наведении. Для списков услуг, портфолио.

Prompt

<a href="#"
  class="service-card group hover:border-[#67c4e8]/30 hover:shadow-xl hover:-translate-y-1 block overflow-hidden bg-white h-full border-slate-200 border rounded-xl pt-8 pr-8 pb-8 pl-8 relative">
  <div class="relative w-16 h-16 mb-6 flex items-center justify-center">
    <div class="absolute inset-0 bg-[#f0f6fa] icon-blob z-0"></div>
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
      stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="building"
      class="lucide lucide-building service-icon relative w-7 h-7 text-[#1e2a4a] z-10 transition-colors duration-300">
      <path d="M12 10h.01" class=""></path>
      <path d="M12 14h.01" class=""></path>
      <path d="M12 6h.01" class=""></path>
      <path d="M16 10h.01" class=""></path>
      <path d="M16 14h.01" class=""></path>
      <path d="M16 6h.01" class=""></path>
      <path d="M8 10h.01" class=""></path>
      <path d="M8 14h.01" class=""></path>
      <path d="M8 6h.01" class=""></path>
      <path d="M9 22v-3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3" class=""></path>
      <rect x="4" y="2" width="16" height="20" rx="2" class=""></rect>
    </svg>
  </div>
  <h3 class="text-lg font-bold text-[#1e2a4a] mb-3 group-hover:text-[#67c4e8] transition-colors">Strata Cleaning</h3>
  <p class="text-sm text-slate-500 leading-relaxed mb-6">
    Complete common area maintenance for residential and commercial strata schemes. We handle foyers, lifts, and
    corridors with care.
  </p>
  <div
    class="flex items-center text-xs font-bold text-[#1e2a4a] uppercase tracking-wide mt-auto group-hover:translate-x-1 transition-transform">
    Learn More <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
      stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right"
      class="lucide lucide-arrow-right w-3.5 h-3.5 ml-1 text-[#67c4e8]">
      <path d="M5 12h14" class=""></path>
      <path d="m12 5 7 7-7 7" class=""></path>
    </svg>
  </div>
</a>
All Prompts