RetroAccordianWithEarthTones
Ретро/винтажный компонент аккордеона с земляными тонами, умеренной сложностью, адаптивным дизайном и поддержкой темных тем для портфолио.
HTML-код
<div class="max-w-md mx-auto rounded-lg overflow-hidden md:max-w-lg bg-gray-200 dark:bg-gray-800">
<div class="md:flex">
<div class="w-full">
<div class="p-4">
<div class="text-lg font-bold text-gray-800 dark:text-gray-100">Accordion Title 1</div>
<div class="mt-2 text-gray-600 dark:text-gray-300 hidden">
<p>This is the content for Accordion 1. It has some text and can include images or other elements.</p>
<img src="https://picsum.photos/seed/picsum/400/200" alt="Accordion Image 1" class="mt-2 rounded">
</div>
</div>
<div class="border-t border-gray-300 dark:border-gray-700 p-4">
<div class="text-lg font-bold text-gray-800 dark:text-gray-100">Accordion Title 2</div>
<div class="mt-2 text-gray-600 dark:text-gray-300 hidden">
<p>This is the content for Accordion 2. More detailed information goes here.</p>
<ul class="list-disc list-inside">
<li>Feature 1</li>
<li>Feature 2</li>
<li>Feature 3</li>
</ul>
</div>
</div>
<div class="border-t border-gray-300 dark:border-gray-700 p-4">
<div class="text-lg font-bold text-gray-800 dark:text-gray-100">Accordion Title 3</div>
<div class="mt-2 text-gray-600 dark:text-gray-300 hidden">
<p>Accordion 3 content. Final section with concluding remarks.</p>
<img src="https://picsum.photos/seed/unsplash/400/200" alt="Accordion Image 2" class="mt-2 rounded">
</div>
</div>
</div>
</div>
</div>Связанные компоненты
Ретро приборная панель аккордеон
Ретро/винтажный аккордеонный компонент для приборной панели с дополнительной цветовой схемой и сложной сложностью. Включает в себя адаптивный дизайн и поддержку темной темы с использованием Tailwind CSS. Нет JavaScript. Изображения через picsum.photos и аватары через randomuser.me.
Темный аккордеон (финансы/банковское дело)
Простой, монохроматический, темный компонент-аккордеон, предназначенный для финансовых и банковских интерфейсов. Он отличается адаптивным дизайном и поддержкой темного режима, используя оттенки одного цвета для чистого вида.
Новостной компонент промышленного аккордеона
Компонент аккордеона в индустриальном стиле для новостных и журналистских веб-сайтов с открытыми элементами, металлическими текстурами и осенней цветовой палитрой. Он адаптивный, предназначен для нескольких интерактивных элементов и включает поддержку темного режима.