Скевоморфный аналоговый компонент карты задания
Адаптивный компонент карточки вакансий со скевоморфным стилем дизайна, использующий аналогичную цветовую схему, подходит для досок объявлений и платформ для развития карьеры. Включает поддержку темного режима.
HTML-код
<div class="p-4 sm:p-8 bg-gradient-to-br from-indigo-100 via-purple-100 to-pink-100 dark:from-gray-800 dark:via-gray-900 dark:to-black min-h-screen flex items-center justify-center font-sans">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 w-full max-w-7xl">
<!-- Job Card 1 -->
<div class="relative rounded-xl shadow-2xl overflow-hidden
bg-gradient-to-br from-indigo-50 to-purple-100 dark:from-gray-700 dark:to-gray-800
transform transition-all duration-300 hover:scale-105 hover:shadow-3xl
border-t border-l border-indigo-200 dark:border-gray-600
before:absolute before:inset-0 before:rounded-xl before:shadow-[inset_2px_2px_4px_rgba(255,255,255,0.7),inset_-2px_-2px_4px_rgba(0,0,0,0.1)]
dark:before:shadow-[inset_2px_2px_4px_rgba(255,255,255,0.05),inset_-2px_-2px_4px_rgba(0,0,0,0.4)]">
<div class="relative p-6 space-y-4">
<!-- Top Section - Company Logo & Title -->
<div class="flex items-center space-x-4">
<img class="w-16 h-16 rounded-full object-cover shadow-md border-2 border-indigo-300 dark:border-gray-500" src="https://picsum.photos/id/68/100/100" alt="Company Logo">
<div>
<h3 class="text-xl font-bold text-indigo-800 dark:text-indigo-300">Senior UX Designer</h3>
<p class="text-md text-purple-700 dark:text-purple-400">Acme Inc.</p>
</div>
</div>
<!-- Job Details -->
<div class="space-y-2 text-indigo-700 dark:text-indigo-200">
<p class="flex items-center text-sm">
<svg class="w-4 h-4 mr-2 text-purple-600 dark:text-purple-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="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.828 0L6.343 16.657m11.314-11.314L12.757 3.09a1.998 1.998 0 00-2.828 0L5.636 5.636m11.314 11.314L12.757 2.247c-.504-.504-1.32-.504-1.824 0L6.343 16.657m11.314-11.314L13.414 7.027a1.998 1.998 0 01-2.828 0L6.343 5.636m11.314 11.314L12.757 13.973a1.998 1.998 0 00-2.828 0L5.636 12.586A".fill-rule="evenodd" clip-rule="evenodd"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.828 0L6.343 16.657m11.314-11.314L12.757 3.09a1.998 1.998 0 00-2.828 0L5.636 5.636m11.314 11.314L12.757 2.247c-.504-.504-1.32-.504-1.824 0L6.343 16.657m11.314-11.314L13.414 7.027a1.998 1.998 0 01-2.828 0L6.343 5.636"></path></svg>
Remote
</p>
<p class="flex items-center text-sm">
<svg class="w-4 h-4 mr-2 text-purple-600 dark:text-purple-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="M12 8c1.657 0 3 .895 3 2s-1.343 2-3 2-3-.895-3-2 1.343-2 3-2zM12 14c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2-1.343-2-3-2z"></path><circle cx="12" cy="12" r="10"></circle></svg>
Full-time
</p>
<p class="flex items-center text-sm">
<svg class="w-4 h-4 mr-2 text-purple-600 dark:text-purple-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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
Posted 2 days ago
</p>
</div>
<!-- Salary Range -->
<p class="text-lg font-semibold text-pink-700 dark:text-pink-300">$90,000 - $120,000 / year</p>
<!-- Tags -->
<div class="flex flex-wrap gap-2">
<span class="px-3 py-1 rounded-full text-xs font-semibold
bg-purple-200 text-purple-800 dark:bg-gray-600 dark:text-gray-200
shadow-sm border border-purple-300 dark:border-gray-500">UX Design</span>
<span class="px-3 py-1 rounded-full text-xs font-semibold
bg-purple-200 text-purple-800 dark:bg-gray-600 dark:text-gray-200
shadow-sm border border-purple-300 dark:border-gray-500">Figma</span>
<span class="px-3 py-1 rounded-full text-xs font-semibold
bg-purple-200 text-purple-800 dark:bg-gray-600 dark:text-gray-200
shadow-sm border border-purple-300 dark:border-gray-500">Research</span>
</div>
<!-- Apply Button -->
<button class="w-full py-3 rounded-lg text-lg font-bold
bg-gradient-to-br from-indigo-500 to-purple-600 text-white
shadow-lg shadow-indigo-400/50 dark:shadow-purple-700/50
transform transition-transform duration-200 hover:scale-[1.02] active:scale-[0.98]
border-b-2 border-r-2 border-indigo-700 dark:border-purple-800
before:absolute before:inset-0 before:rounded-lg before:shadow-[inset_1px_1px_2px_rgba(255,255,255,0.4),inset_-1px_-1px_2px_rgba(0,0,0,0.2)]
dark:before:shadow-[inset_1px_1px_2px_rgba(255,255,255,0.1),inset_-1px_-1px_2px_rgba(0,0,0,0.4)]
relative overflow-hidden group">
<span class="relative z-10">Apply Now</span>
<span class="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 transition-opacity duration-200"></span>
</button>
</div>
</div>
<!-- Job Card 2 -->
<div class="relative rounded-xl shadow-2xl overflow-hidden
bg-gradient-to-br from-indigo-50 to-purple-100 dark:from-gray-700 dark:to-gray-800
transform transition-all duration-300 hover:scale-105 hover:shadow-3xl
border-t border-l border-indigo-200 dark:border-gray-600
before:absolute before:inset-0 before:rounded-xl before:shadow-[inset_2px_2px_4px_rgba(255,255,255,0.7),inset_-2px_-2px_4px_rgba(0,0,0,0.1)]
dark:before:shadow-[inset_2px_2px_4px_rgba(255,255,255,0.05),inset_-2px_-2px_4px_rgba(0,0,0,0.4)]">
<div class="relative p-6 space-y-4">
<!-- Top Section - Company Logo & Title -->
<div class="flex items-center space-x-4">
<img class="w-16 h-16 rounded-full object-cover shadow-md border-2 border-indigo-300 dark:border-gray-500" src="https://picsum.photos/id/88/100/100" alt="Company Logo">
<div>
<h3 class="text-xl font-bold text-indigo-800 dark:text-indigo-300">Marketing Manager</h3>
<p class="text-md text-purple-700 dark:text-purple-400">Global Solutions</p>
</div>
</div>
<!-- Job Details -->
<div class="space-y-2 text-indigo-700 dark:text-indigo-200">
<p class="flex items-center text-sm">
<svg class="w-4 h-4 mr-2 text-purple-600 dark:text-purple-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="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.828 0L6.343 16.657m11.314-11.314L12.757 3.09a1.998 1.998 0 00-2.828 0L5.636 5.636m11.314 11.314L12.757 2.247c-.504-.504-1.32-.504-1.824 0L6.343 16.657m11.314-11.314L13.414 7.027a1.998 1.998 0 01-2.828 0L6.343 5.636"></path></svg>
Hybrid (NYC)
</p>
<p class="flex items-center text-sm">
<svg class="w-4 h-4 mr-2 text-purple-600 dark:text-purple-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="M12 8c1.657 0 3 .895 3 2s-1.343 2-3 2-3-.895-3-2 1.343-2 3-2zM12 14c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2-1.343-2-3-2z"></path><circle cx="12" cy="12" r="10"></circle></svg>
Full-time
</p>
<p class="flex items-center text-sm">
<svg class="w-4 h-4 mr-2 text-purple-600 dark:text-purple-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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
Posted 5 days ago
</p>
</div>
<!-- Salary Range -->
<p class="text-lg font-semibold text-pink-700 dark:text-pink-300">$75,000 - $100,000 / year</p>
<!-- Tags -->
<div class="flex flex-wrap gap-2">
<span class="px-3 py-1 rounded-full text-xs font-semibold
bg-purple-200 text-purple-800 dark:bg-gray-600 dark:text-gray-200
shadow-sm border border-purple-300 dark:border-gray-500">Digital Marketing</span>
<span class="px-3 py-1 rounded-full text-xs font-semibold
bg-purple-200 text-purple-800 dark:bg-gray-600 dark:text-gray-200
shadow-sm border border-purple-300 dark:border-gray-500">SEO</span>
<span class="px-3 py-1 rounded-full text-xs font-semibold
bg-purple-200 text-purple-800 dark:bg-gray-600 dark:text-gray-200
shadow-sm border border-purple-300 dark:border-gray-500">Content</span>
</div>
<!-- Apply Button -->
<button class="w-full py-3 rounded-lg text-lg font-bold
bg-gradient-to-br from-indigo-500 to-purple-600 text-white
shadow-lg shadow-indigo-400/50 dark:shadow-purple-700/50
transform transition-transform duration-200 hover:scale-[1.02] active:scale-[0.98]
border-b-2 border-r-2 border-indigo-700 dark:border-purple-800
before:absolute before:inset-0 before:rounded-lg before:shadow-[inset_1px_1px_2px_rgba(255,255,255,0.4),inset_-1px_-1px_2px_rgba(0,0,0,0.2)]
dark:before:shadow-[inset_1px_1px_2px_rgba(255,255,255,0.1),inset_-1px_-1px_2px_rgba(0,0,0,0.4)]
relative overflow-hidden group">
<span class="relative z-10">Apply Now</span>
<span class="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 transition-opacity duration-200"></span>
</button>
</div>
</div>
<!-- Job Card 3 -->
<div class="relative rounded-xl shadow-2xl overflow-hidden
bg-gradient-to-br from-indigo-50 to-purple-100 dark:from-gray-700 dark:to-gray-800
transform transition-all duration-300 hover:scale-105 hover:shadow-3xl
border-t border-l border-indigo-200 dark:border-gray-600
before:absolute before:inset-0 before:rounded-xl before:shadow-[inset_2px_2px_4px_rgba(255,255,255,0.7),inset_-2px_-2px_4px_rgba(0,0,0,0.1)]
dark:before:shadow-[inset_2px_2px_4px_rgba(255,255,255,0.05),inset_-2px_-2px_4px_rgba(0,0,0,0.4)]">
<div class="relative p-6 space-y-4">
<!-- Top Section - Company Logo & Title -->
<div class="flex items-center space-x-4">
<img class="w-16 h-16 rounded-full object-cover shadow-md border-2 border-indigo-300 dark:border-gray-500" src="https://picsum.photos/id/98/100/100" alt="Company Logo">
<div>
<h3 class="text-xl font-bold text-indigo-800 dark:text-indigo-300">Frontend Developer</h3>
<p class="text-md text-purple-700 dark:text-purple-400">Tech Innovators</p>
</div>
</div>
<!-- Job Details -->
<div class="space-y-2 text-indigo-700 dark:text-indigo-200">
<p class="flex items-center text-sm">
<svg class="w-4 h-4 mr-2 text-purple-600 dark:text-purple-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="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.828 0L6.343 16.657m11.314-11.314L12.757 3.09a1.998 1.998 0 00-2.828 0L5.636 5.636m11.314 11.314L12.757 2.247c-.504-.504-1.32-.504-1.824 0L6.343 16.657m11.314-11.314L13.414 7.027a1.998 1.998 0 01-2.828 0L6.343 5.636"></path></svg>
On-site (London)
</p>
<p class="flex items-center text-sm">
<svg class="w-4 h-4 mr-2 text-purple-600 dark:text-purple-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="M12 8c1.657 0 3 .895 3 2s-1.343 2-3 2-3-.895-3-2 1.343-2 3-2zM12 14c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2-1.343-2-3-2z"></path><circle cx="12" cy="12" r="10"></circle></svg>
Full-time
</p>
<p class="flex items-center text-sm">
<svg class="w-4 h-4 mr-2 text-purple-600 dark:text-purple-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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
Posted 1 week ago
</p>
</div>
<!-- Salary Range -->
<p class="text-lg font-semibold text-pink-700 dark:text-pink-300">$80,000 - $110,000 / year</p>
<!-- Tags -->
<div class="flex flex-wrap gap-2">
<span class="px-3 py-1 rounded-full text-xs font-semibold
bg-purple-200 text-purple-800 dark:bg-gray-600 dark:text-gray-200
shadow-sm border border-purple-300 dark:border-gray-500">React</span>
<span class="px-3 py-1 rounded-full text-xs font-semibold
bg-purple-200 text-purple-800 dark:bg-gray-600 dark:text-gray-200
shadow-sm border border-purple-300 dark:border-gray-500">Tailwind CSS</span>
<span class="px-3 py-1 rounded-full text-xs font-semibold
bg-purple-200 text-purple-800 dark:bg-gray-600 dark:text-gray-200
shadow-sm border border-purple-300 dark:border-gray-500">JavaScript</span>
</div>
<!-- Apply Button -->
<button class="w-full py-3 rounded-lg text-lg font-bold
bg-gradient-to-br from-indigo-500 to-purple-600 text-white
shadow-lg shadow-indigo-400/50 dark:shadow-purple-700/50
transform transition-transform duration-200 hover:scale-[1.02] active:scale-[0.98]
border-b-2 border-r-2 border-indigo-700 dark:border-purple-800
before:absolute before:inset-0 before:rounded-lg before:shadow-[inset_1px_1px_2px_rgba(255,255,255,0.4),inset_-1px_-1px_2px_rgba(0,0,0,0.2)]
dark:before:shadow-[inset_1px_1px_2px_rgba(255,255,255,0.1),inset_-1px_-1px_2px_rgba(0,0,0,0.4)]
relative overflow-hidden group">
<span class="relative z-10">Apply Now</span>
<span class="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 transition-opacity duration-200"></span>
</button>
</div>
</div>
</div>
</div>Связанные компоненты
Компонент Карточки Товаров
Простые, адаптивные карточки товаров с акварельным/художественным дизайном, дополнительной цветовой схемой и полной поддержкой темного режима, подходящие для портфолио.
Компонент Карточки Товаров
Компонент карточек товаров в брутальном стиле с отзывчивыми эффектами и поддержкой темной темы с использованием Tailwind CSS.
Компонент Карточки Товаров
Сложный компонент карточки товара с увлекательными микровзаимодействиями и монохроматической цветовой гаммой. Разработанный для бизнес-сайтов, он адаптивный и поддерживает темный режим.