カルーセルスライダーコンポーネント
ブログやコンテンツの消費用に設計されたミニマリストのカルーセルスライダーコンポーネントで、トライアドの配色とダークテーマをサポートするレスポンシブデザインが特徴です。
HTMLコード
<div class="carousel w-full relative">
<div class="carousel-inner relative w-full overflow-hidden">
<!-- Slide 1 -->
<div class="carousel-item active relative float-left w-full">
<div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-md shadow-md">
<img src="https://picsum.photos/800/400?random=1" alt="Slide 1" class="w-full h-48 object-cover rounded-md mb-4" />
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Title 1</h2>
<p class="text-gray-600 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio.</p>
</div>
</div>
<!-- Slide 2 -->
<div class="carousel-item relative float-left w-full">
<div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-md shadow-md">
<img src="https://picsum.photos/800/400?random=2" alt="Slide 2" class="w-full h-48 object-cover rounded-md mb-4" />
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Title 2</h2>
<p class="text-gray-600 dark:text-gray-400">Suspendisse potenti. Praesent dapibus, neque id vestibulum.</p>
</div>
</div>
<!-- Slide 3 -->
<div class="carousel-item relative float-left w-full">
<div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-md shadow-md">
<img src="https://picsum.photos/800/400?random=3" alt="Slide 3" class="w-full h-48 object-cover rounded-md mb-4" />
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Title 3</h2>
<p class="text-gray-600 dark:text-gray-400">Curabitur blandit tempus porttitor. Maecenas sed diam eget risus varius blandit.</p>
</div>
</div>
</div>
<a class="carousel-control-prev absolute top-1/2 left-0 transform -translate-y-1/2 z-10" href="#" role="button" aria-label="Previous">
<span class="inline-block bg-gray-600 dark:bg-gray-400 p-2 rounded-full"><</span>
</a>
<a class="carousel-control-next absolute top-1/2 right-0 transform -translate-y-1/2 z-10" href="#" role="button" aria-label="Next">
<span class="inline-block bg-gray-600 dark:bg-gray-400 p-2 rounded-full">></span>
</a>
</div>関連コンポーネント
カルーセルスライダーコンポーネント
Tailwind CSS を使用して「ポートフォリオ - 作品や製品を展示する」という目的のために、デザイン スタイル「Neumorphism - 微妙な影を使用して背景から押し出されるように見える要素を作成するソフト UI スタイル」と、カラースキーム「Complementary - Color Wheel 上で互いに反対の色」と複雑度レベルの「Complex - Rich interface with multiple interactive elements」を使用して、Web コンポーネント Carousel Slider コンポーネントを実装します。ダークテーマをサポートするレスポンシブデザインを作成します。JavaScript コードは必要なく、Tailwind クラスを含む HTML のみが必要です。ダークモードの場合は、スタイル設定にTailwindのdark:プレフィックスを使用します。画像が必要な場合は、画像には picsum.photos を、アバターには randomuser.me を使用します。
Monospace Carousel Slider コンポーネント
ブログ/コンテンツ表示用のシンプルでクリーンなモノスペース風のカルーセルスライダーコンポーネントで、類似の配色とダークモードを含む完全な応答性で設計されています。