コンポーネントタイムライン Neumorphism Timeline コンポーネント

Neumorphism Timeline コンポーネント

Tailwind CSS を使用した Neumorphism でスタイル付けされたレスポンシブ Timeline コンポーネントで、ダークモードがサポートされています。

プレビュー

HTMLコード

<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800">
    <div class="w-full max-w-3xl space-y-8">
        <div class="relative flex flex-col items-start bg-white dark:bg-gray-700 rounded-xl shadow-neumorphism p-6">
            <div class="absolute left-0 w-3 h-3 bg-blue-500 rounded-full transform -translate-x-1/2"></div>
            <h2 class="mb-1 text-lg font-semibold text-gray-800 dark:text-gray-100">Event Title 1</h2>
            <p class="text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum.</p>
            <img class="mt-4 rounded-lg shadow-lg" src="https://picsum.photos/600/300?random=1" alt="Random Image" />
        </div>
        
        <div class="relative flex flex-col items-start bg-white dark:bg-gray-700 rounded-xl shadow-neumorphism p-6">
            <div class="absolute left-0 w-3 h-3 bg-blue-500 rounded-full transform -translate-x-1/2"></div>
            <h2 class="mb-1 text-lg font-semibold text-gray-800 dark:text-gray-100">Event Title 2</h2>
            <p class="text-gray-600 dark:text-gray-300">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
            <img class="mt-4 rounded-lg shadow-lg" src="https://picsum.photos/600/300?random=2" alt="Random Image" />
        </div>
        
        <div class="relative flex flex-col items-start bg-white dark:bg-gray-700 rounded-xl shadow-neumorphism p-6">
            <div class="absolute left-0 w-3 h-3 bg-blue-500 rounded-full transform -translate-x-1/2"></div>
            <h2 class="mb-1 text-lg font-semibold text-gray-800 dark:text-gray-100">Event Title 3</h2>
            <p class="text-gray-600 dark:text-gray-300">Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur.</p>
            <img class="mt-4 rounded-lg shadow-lg" src="https://picsum.photos/600/300?random=3" alt="Random Image" />
        </div>
    </div>
</div>

<style>
    @layer components {
        .shadow-neumorphism {
            box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.2),
                        -8px -8px 15px rgba(255, 255, 255, 0.3);
        }
    }
</style>

Neumorphism Timeline コンポーネント

プレビュー

HTMLコード

関連コンポーネント

タイムラインコンポーネント

タイムラインコンポーネント

Playful_Music_Timeline_Component