Composants Visionneuse à 360° Composant Visionneuse à 360°

Composant Visionneuse à 360°

Un composant de visionneuse 360° réactif conçu pour les tableaux de bord avec un style de conception 3D et la prise en charge du mode sombre.

Aperçu

HTML Code

<div class="flex flex-col items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">
    <h1 class="text-4xl font-bold text-center text-gray-800 dark:text-white mb-8">360° Viewer</h1>
    <div class="relative w-full max-w-lg bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
        <img src="https://picsum.photos/600/400" alt="360° View" class="w-full h-full object-cover rounded-lg">
        <div class="absolute inset-0 flex items-center justify-center">
            <div class="bg-white dark:bg-gray-850 p-4 rounded-lg shadow text-center">
                <h2 class="text-2xl font-semibold text-gray-800 dark:text-white">Explore Data</h2>
                <p class="text-gray-600 dark:text-gray-300">Interact with the 3D model to visualize data points.</p>
            </div>
        </div>
    </div>
    <div class="grid grid-cols-3 gap-4 mt-8 w-full max-w-lg">
        <div class="bg-indigo-500 dark:bg-indigo-700 text-white p-4 rounded-lg shadow-lg text-center">
            <h3 class="text-lg font-semibold">Data Point 1</h3>
            <p class="text-sm">Details about this data point.</p>
        </div>
        <div class="bg-orange-500 dark:bg-orange-700 text-white p-4 rounded-lg shadow-lg text-center">
            <h3 class="text-lg font-semibold">Data Point 2</h3>
            <p class="text-sm">Details about this data point.</p>
        </div>
        <div class="bg-teal-500 dark:bg-teal-700 text-white p-4 rounded-lg shadow-lg text-center">
            <h3 class="text-lg font-semibold">Data Point 3</h3>
            <p class="text-sm">Details about this data point.</p>
        </div>
    </div>
    <div class="mt-8 flex items-center justify-center">
        <a href="#" class="bg-indigo-500 dark:bg-indigo-700 text-white py-2 px-4 rounded-lg shadow hover:bg-indigo-600 dark:hover:bg-indigo-800">Explore More</a>
    </div>
</div>

Composants associés

360_viewer_component

Un composant de visionneuse à 360° complexe et réactif avec une esthétique cyberpunk et des couleurs automnales, conçu pour les plateformes éducatives. Il prend en charge le mode sombre, des éléments interactifs et une typographie riche.

Ouvrir

Composant Visionneuse 360

Composant de visualisation à 360 degrés avec prise en charge du mode sombre.

Ouvrir

360_viewer_component_sports_grayscale

Un composant de visualisation à 360° simple et réactif pour les applications de sport/fitness, avec un style aquarelle/artistique avec une palette de couleurs en niveaux de gris et la prise en charge du mode sombre.

Ouvrir