cardfeaturetailwindresponsiveimageiconmarketingui

Responsive AI Intelligence Feature Card

Адаптивная карточка AI-функции: стильный UI-компонент с иконками, текстом и изображением. Идеально для лендингов, дашбордов и маркетинговых сеток.

Live Preview

Prompt

<article class="relative overflow-hidden sm:rounded-3xl col-span-1 sm:col-span-2 md:col-span-3 lg:col-span-4 min-h-[380px] sm:min-h-[440px] md:min-h-[500px] sm:p-6 md:p-7 flex flex-col text-white bg-orange-500 border-zinc-900 border rounded-2xl pt-5 pr-5 pb-5 pl-5 max-w-xl">
      <div class="flex items-center justify-between text-white/90">
        <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-up-right" class="lucide lucide-arrow-up-right w-5 h-5"><path d="M7 7h10v10" class=""></path><path d="M7 17 17 7" class=""></path></svg>
        <span class="text-3xl sm:text-4xl font-semibold tracking-tight">01</span>
      </div>
      <h3 class="mt-4 sm:mt-5 text-2xl sm:text-3xl tracking-tight font-semibold">AI Intelligence</h3>
      <p class="mt-2 text-sm sm:text-base text-white/90">
        An advanced AI system that analyzes patterns, predicts outcomes, and automates complex workflows to maximize efficiency across your entire organization.
      </p>
      <div class="mt-5 sm:mt-6 rounded-xl sm:rounded-2xl overflow-hidden bg-white/10 ring-1 ring-white/20">
        <img src="https://images.unsplash.com/photo-1504384308090-c894fdcc538d?q=80&amp;w=1200&amp;auto=format&amp;fit=crop" alt="3D industrial render showcasing precision components" class="w-full h-44 sm:h-56 md:h-64 object-cover">
      </div>
      <div class="mt-auto pt-6 flex items-center gap-2 text-white/90">
        <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="waves" class="lucide lucide-waves w-4 h-4"><path d="M2 6c.6.5 1.2 1 2.5 1C7 7 7 5 9.5 5c2.6 0 2.4 2 5 2 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1" class=""></path><path d="M2 12c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 2.6 0 2.4 2 5 2 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1" class=""></path><path d="M2 18c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 2.6 0 2.4 2 5 2 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1" class=""></path></svg>
        <span class="text-sm font-medium">adaptive</span>
      </div>
    </article>

All Prompts