Компонент «Нейроморфные карты»
Отзывчивый компонент карточек, выполненный в стиле Neumorphism с поддержкой темной темы, с тонкими тенями и гибким макетом.
HTML-код
<div class="flex flex-wrap justify-center gap-4 p-6 bg-gray-100 dark:bg-gray-800">
<div class="bg-white dark:bg-gray-700 rounded-xl shadow-lg p-4 w-60 transition-transform transform hover:scale-105">
<img class="rounded-t-xl h-36 w-full object-cover" src="https://picsum.photos/200/100" alt="Card Image">
<div class="p-4">
<h2 class="text-lg font-bold text-gray-800 dark:text-white">Card Title</h2>
<p class="text-gray-600 dark:text-gray-300 mt-2">This is a short description of the card content.</p>
</div>
<div class="flex items-center mt-4">
<img class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
<div class="ml-2">
<h3 class="text-md text-gray-800 dark:text-white">User Name</h3>
<p class="text-sm text-gray-600 dark:text-gray-300">User Role</p>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-700 rounded-xl shadow-lg p-4 w-60 transition-transform transform hover:scale-105">
<img class="rounded-t-xl h-36 w-full object-cover" src="https://picsum.photos/201/100" alt="Card Image">
<div class="p-4">
<h2 class="text-lg font-bold text-gray-800 dark:text-white">Another Card Title</h2>
<p class="text-gray-600 dark:text-gray-300 mt-2">More details about the content of this card.</p>
</div>
<div class="flex items-center mt-4">
<img class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar">
<div class="ml-2">
<h3 class="text-md text-gray-800 dark:text-white">Another User</h3>
<p class="text-sm text-gray-600 dark:text-gray-300">User Role</p>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-700 rounded-xl shadow-lg p-4 w-60 transition-transform transform hover:scale-105">
<img class="rounded-t-xl h-36 w-full object-cover" src="https://picsum.photos/202/100" alt="Card Image">
<div class="p-4">
<h2 class="text-lg font-bold text-gray-800 dark:text-white">Third Card Title</h2>
<p class="text-gray-600 dark:text-gray-300 mt-2">Description of the card content goes here.</p>
</div>
<div class="flex items-center mt-4">
<img class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar">
<div class="ml-2">
<h3 class="text-md text-gray-800 dark:text-white">User Three</h3>
<p class="text-sm text-gray-600 dark:text-gray-300">User Role</p>
</div>
</div>
</div>
</div>Связанные компоненты
Компонент 3D-карт
Адаптивный компонент карточки со стилем 3D-дизайна, яркими цветами и множеством интерактивных элементов, подходящий для приборной панели. Он поддерживает темный режим с использованием темного префикса Tailwind.
Компонент карт темного режима
Компонент адаптивных карточек, разработанный для бизнес/корпоративных сайтов с темным пользовательским интерфейсом и цветовой гаммой в оттенках серого, отличающийся умеренной сложностью и интерактивностью.
Компонент карт
Отзывчивый компонент карточки портфолио с брутальным стилем дизайна, с использованием пастельной цветовой гаммы и умеренной сложности с интерактивными функциями. Эта карта демонстрирует работу или товары и поддерживает темный режим.