Components Infographics Infographics Component

Infographics Component

A responsive 3D infographic component designed for social media interfaces with vibrant colors and dark theme support, incorporating three-dimensional elements for depth and engagement.

Preview

HTML Code

<div class="bg-gray-800 text-white p-6 rounded-lg shadow-lg max-w-lg mx-auto">
    <div class="text-center mb-4">
        <h2 class="text-3xl font-bold">Infographic Title</h2>
        <p class="text-gray-400">Engaging insights and data visualizations</p>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="bg-gradient-to-r from-purple-500 to-blue-500 p-4 rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105"> 
            <h3 class="font-semibold text-xl">Key Insight #1</h3>
            <img src="https://picsum.photos/id/1018/400/300" alt="Infographic" class="rounded-lg my-2 shadow-md"/>
            <p class="text-gray-200">Details about the first key insight go here. It should be engaging and informative.</p>
        </div>
        <div class="bg-gradient-to-r from-green-400 to-teal-500 p-4 rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105">
            <h3 class="font-semibold text-xl">Key Insight #2</h3>
            <img src="https://picsum.photos/id/1015/400/300" alt="Infographic" class="rounded-lg my-2 shadow-md"/>
            <p class="text-gray-200">Details about the second key insight go here. Make it intriguing!</p>
        </div>
    </div>
    <div class="mt-6">
        <h3 class="text-lg font-semibold">Join the Conversation</h3>
        <div class="flex items-center mt-2">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2" />
            <input type="text" placeholder="Share your thoughts..." class="bg-gray-700 text-white rounded-full py-2 px-4 w-full" />
        </div>
        <button class="mt-2 bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full inline-flex items-center">Submit</button>
    </div>
</div>

<style>
@media (prefers-color-scheme: dark) {
    .bg-gray-800 {
        background-color: #1c1c1c;
    }
    .bg-gradient-to-r {
        background-image: linear-gradient(to right, #6a0dad, #1e90ff);
    }
}
</style>

Related Components

RetroInfographicsComponent

A responsive infographics component with a retro/vintage design, pastel color scheme, and dark mode support. Uses Tailwind CSS for styling and includes multiple interactive elements for a complex interface suitable for blogs and content consumption. Includes a timeline, progress bars, charts, and a call to action, all styled with 80s/90s aesthetics and pastel colors. Uses random images from picsum.photos and randomuser.me for avatars.

Open