Componenti di visualizzazione dei contenuti

Componente Visualizzazione contenuto

Un componente in stile glassmorphism per la visualizzazione di contenuti di portfolio con elementi interattivi, che supporta la modalità scura.

Apri anteprima

                <div class="flex flex-col items-center justify-center p-5 bg-gray-900 min-h-screen">
    <div class="bg-white dark:bg-gray-800 backdrop-blur-lg bg-opacity-30 rounded-lg shadow-lg p-6 max-w-md w-full">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Portfolio Showcase</h2>
        <p class="text-gray-600 dark:text-gray-400 mb-6">Explore my recent work and projects in this beautifully designed portfolio section.</p>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div class="flex flex-col items-center bg-white dark:bg-gray-700 rounded-lg overflow-hidden shadow-md">
                <img class="w-full h-40 object-cover" src="https://picsum.photos/400/200?random=1" alt="Project Image">
                <div class="p-4">
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Project Title 1</h3>
                    <p class="text-gray-600 dark:text-gray-400">A brief description of the project.</p>
                    <div class="mt-2">
                        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
                    </div>
                </div>
            </div>

            <div class="flex flex-col items-center bg-white dark:bg-gray-700 rounded-lg overflow-hidden shadow-md">
                <img class="w-full h-40 object-cover" src="https://picsum.photos/400/200?random=2" alt="Project Image">
                <div class="p-4">
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Project Title 2</h3>
                    <p class="text-gray-600 dark:text-gray-400">A brief description of the project.</p>
                    <div class="mt-2">
                        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar">
                    </div>
                </div>
            </div>

            <div class="flex flex-col items-center bg-white dark:bg-gray-700 rounded-lg overflow-hidden shadow-md">
                <img class="w-full h-40 object-cover" src="https://picsum.photos/400/200?random=3" alt="Project Image">
                <div class="p-4">
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Project Title 3</h3>
                    <p class="text-gray-600 dark:text-gray-400">A brief description of the project.</p>
                    <div class="mt-2">
                        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar">
                    </div>
                </div>
            </div>

            <div class="flex flex-col items-center bg-white dark:bg-gray-700 rounded-lg overflow-hidden shadow-md">
                <img class="w-full h-40 object-cover" src="https://picsum.photos/400/200?random=4" alt="Project Image">
                <div class="p-4">
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Project Title 4</h3>
                    <p class="text-gray-600 dark:text-gray-400">A brief description of the project.</p>
                    <div class="mt-2">
                        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Componente Visualizzazione contenuto

Un componente di visualizzazione dei contenuti reattivo caratterizzato da uno stile di design minimalista e piatto, ideale per blog e consumo di contenuti. Ha una combinazione di colori in scala di grigi ed è dotato di elementi interattivi mentre supporta la modalità oscura.

Apri anteprima

                <div class="max-w-xl mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
    <div class="flex items-center mb-4">
        <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/10.jpg" alt="Avatar">
        <div class="ml-4">
            <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">John Doe</h2>
            <p class="text-gray-600 dark:text-gray-400">January 1, 2023</p>
        </div>
    </div>
    <h3 class="text-lg font-bold text-gray-800 dark:text-gray-200">Understanding Minimalism in Design</h3>
    <img class="w-full h-48 object-cover rounded-md my-4" src="https://picsum.photos/640/360?random=1" alt="Content Image">
    <p class="text-gray-700 dark:text-gray-300 mb-4">Minimalism in design is all about simplicity and the use of space. By focusing on fewer elements, designers can create engaging experiences that are not only functional but also aesthetically pleasing. In this blog post, we will explore the principles of minimalism and how they can be applied.</p>
    <a href="#" class="inline-block bg-gray-800 text-white rounded-md px-4 py-2 hover:bg-gray-700 dark:bg-gray-300 dark:text-gray-800 dark:hover:bg-gray-400">Read More</a>
</div>

Componenti di visualizzazione dei contenuti

Un componente di visualizzazione dei contenuti reattivo per il consumo di blog o contenuti con uno stile di progettazione 3D e supporto per temi scuri.

Apri anteprima

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg transition-transform transform hover:scale-105">
    <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600 mr-3" />
        <div class="flex flex-col">
            <span class="text-gray-800 dark:text-gray-200 font-semibold">John Doe</span>
            <span class="text-gray-500 dark:text-gray-400 text-sm">March 10, 2023</span>
        </div>
    </div>
    <h2 class="text-gray-900 dark:text-gray-100 text-xl font-bold mb-2">Exploring the Depths of 3D Design</h2>
    <p class="text-gray-700 dark:text-gray-300 mb-4">Incorporating three-dimensional elements into design can create an engaging experience for users, making the content more appealing and enjoyable to consume. In this post, we explore various techniques...</p>
    <img src="https://picsum.photos/400/200?random=1" alt="3D Design Example" class="rounded-lg mb-4 shadow-md">
    <button class="bg-gray-800 dark:bg-gray-300 text-white dark:text-gray-800 px-4 py-2 rounded-md transition duration-300 hover:bg-gray-700 dark:hover:bg-gray-400">Read More</button>
</div>

Componente Visualizzazione contenuto

Un semplice componente di visualizzazione dei contenuti reattivi per le interfacce dei social media, progettato con i principi del Material Design e una combinazione di colori triadica.

Apri anteprima

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg max-w-md mx-auto my-8 overflow-hidden">
    <div class="p-4">
        <div class="flex items-center space-x-4">
            <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
            <div>
                <h2 class="text-lg font-semibold text-gray-800 dark:text-white">John Doe</h2>
                <p class="text-gray-600 dark:text-gray-400">@johndoe</p>
            </div>
        </div>
        <p class="mt-4 text-gray-700 dark:text-gray-300">
            This is an example of a simple content display component in a social media context, showcasing the Material Design principles with a triadic color scheme.
        </p>
    </div>
    <img class="w-full h-48 object-cover" src="https://picsum.photos/400/200" alt="Content Image">
    <div class="p-4">
        <div class="flex justify-between items-center">
            <button class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-blue-700 dark:hover:bg-blue-600">Like</button>
            <button class="bg-green-500 hover:bg-green-600 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-green-400 dark:bg-green-700 dark:hover:bg-green-600">Share</button>
        </div>
    </div>
</div>

Componenti di visualizzazione dei contenuti

Un portfolio di progettazione 3D che mostra lavori o prodotti con una combinazione di colori in scala di grigi e un design reattivo, che supporta la modalità scura.

Apri anteprima

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-10 flex flex-col items-center justify-center">
    <h1 class="text-3xl font-bold mb-5 text-gray-800 dark:text-gray-200">Portfolio</h1>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-all duration-300 hover:scale-105">
            <img class="w-full h-48 rounded-t-lg" src="https://picsum.photos/300/200?random=1" alt="Artwork 1">
            <div class="p-5">
                <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Project Title 1</h2>
                <p class="text-gray-600 dark:text-gray-400">Short description of the project goes here.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-all duration-300 hover:scale-105">
            <img class="w-full h-48 rounded-t-lg" src="https://picsum.photos/300/200?random=2" alt="Artwork 2">
            <div class="p-5">
                <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Project Title 2</h2>
                <p class="text-gray-600 dark:text-gray-400">Short description of the project goes here.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-all duration-300 hover:scale-105">
            <img class="w-full h-48 rounded-t-lg" src="https://picsum.photos/300/200?random=3" alt="Artwork 3">
            <div class="p-5">
                <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Project Title 3</h2>
                <p class="text-gray-600 dark:text-gray-400">Short description of the project goes here.</p>
            </div>
        </div>
    </div>
    <footer class="w-full text-center mt-10 text-gray-600 dark:text-gray-400">
        <p>&copy; 2023 Your Name. All rights reserved.</p>
    </footer>
</div>

Componente Visualizzazione contenuto

Un componente di visualizzazione dei contenuti semplice e reattivo progettato in stile brutalista con colori complementari. Adatto per siti Web aziendali/aziendali, supporta la modalità oscura.

Apri anteprima

                <div class="bg-white dark:bg-gray-800 text-black dark:text-white border border-black dark:border-white p-6 max-w-lg mx-auto">
    <h1 class="text-3xl font-bold mb-4">Company Title</h1>
    <img src="https://picsum.photos/500/300" alt="Content Image" class="w-full rounded-lg mb-4">
    <p class="text-lg mb-6">This is a brief description of the company. Emphasizing clear, bold statements to convey professionalism and competence in a raw form.</p>
    <div class="flex items-center">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-3">
        <div class="">
            <h2 class="text-xl font-semibold">John Doe</h2>
            <p class="text-gray-600 dark:text-gray-400">CEO</p>
        </div>
    </div>
</div>

Componente Visualizzazione contenuto

Un componente di visualizzazione dei contenuti progettato in uno stile scheumorfico per l'e-commerce con un tema scuro. Mette in mostra prodotti con elementi minimali, utilizzando una combinazione di colori analoga per un'estetica piacevole.

Apri anteprima

                <div class="bg-gray-100 dark:bg-gray-900 p-6 rounded-lg shadow-lg">
  <div class="flex flex-col justify-center items-center">
    <img class="w-full h-48 object-cover rounded-t-lg" src="https://picsum.photos/500/300" alt="Product Image">
    <div class="bg-white dark:bg-gray-800 p-4 rounded-b-lg w-full">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Product Name</h2>
      <p class="text-gray-600 dark:text-gray-300">$29.99</p>
      <p class="text-gray-700 dark:text-gray-300">A short description of the product goes here, detailing its features and benefits.</p>
      <div class="flex items-center mt-4">
        <img class="w-10 h-10 rounded-full border-2 border-gray-200 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
        <span class="text-gray-800 dark:text-gray-200 ml-2">Seller Name</span>
      </div>
      <button class="mt-4 bg-blue-500 dark:bg-blue-700 text-white font-bold py-2 px-4 rounded hover:bg-blue-800 dark:hover:bg-blue-600">Add to Cart</button>
    </div>
  </div>
</div>

Componente Componenti di visualizzazione dei contenuti

Un componente di visualizzazione dei contenuti reattivo progettato per siti Web aziendali/aziendali con supporto della modalità scura e una combinazione di colori vivaci. Include sezioni per avatar utente, contenuti testuali e immagini.

Apri anteprima

                <div class="bg-gray-900 text-white p-5 rounded-lg shadow-lg max-w-4xl mx-auto">
    <h2 class="text-2xl font-bold mb-4">Our Team</h2>
    <div class="grid md:grid-cols-2 gap-5">
        <div class="bg-gray-800 p-4 rounded-lg transition-shadow duration-300 hover:shadow-xl">
            <img class="w-full rounded-lg" src="https://picsum.photos/300/200" alt="Content Image">
            <div class="flex items-center mt-2">
                <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
                <div class="ml-3">
                    <p class="text-lg font-semibold">John Doe</p>
                    <p class="text-sm text-gray-400">CEO</p>
                </div>
            </div>
            <p class="mt-2 text-gray-300">John is the visionary behind the company, driving innovation and strategies.</p>
        </div>
        <div class="bg-gray-800 p-4 rounded-lg transition-shadow duration-300 hover:shadow-xl">
            <img class="w-full rounded-lg" src="https://picsum.photos/300/201" alt="Content Image">
            <div class="flex items-center mt-2">
                <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar">
                <div class="ml-3">
                    <p class="text-lg font-semibold">Jane Smith</p>
                    <p class="text-sm text-gray-400">CTO</p>
                </div>
            </div>
            <p class="mt-2 text-gray-300">Jane oversees all technical aspects, ensuring seamless operations.</p>
        </div>
    </div>
    <h2 class="text-2xl font-bold mt-10 mb-4">Company Achievements</h2>
    <div class="bg-gray-800 p-4 rounded-lg transition-shadow duration-300 hover:shadow-xl">
        <ul class="list-disc list-inside">
            <li class="mt-2 text-gray-300">Awarded "Best Startup of the Year".</li>
            <li class="mt-2 text-gray-300">Reached over 10,000 active users in under a year.</li>
            <li class="mt-2 text-gray-300">Secured $1 million in funding.</li>
        </ul>
    </div>
</div>

Componente Visualizzazione contenuto

Un componente di visualizzazione dei contenuti reattivo con Glassmorphism, con sfondo sfocato ed elementi traslucidi con supporto per la modalità oscura.

Apri anteprima

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-5">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 backdrop-filter backdrop-blur-lg bg-opacity-30 border border-gray-200 dark:border-gray-700">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Content Display Title</h2>
        <p class="text-gray-600 dark:text-gray-300 mb-4">This component features a glassmorphism style with blurred background and translucent elements.</p>
        <div class="flex items-center space-x-4 mb-4">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-10 h-10 rounded-full">
            <div>
                <h3 class="text-lg font-medium text-gray-800 dark:text-white">User Name</h3>
                <span class="text-sm text-gray-500 dark:text-gray-400">User Title</span>
            </div>
        </div>
        <img src="https://picsum.photos/400/200" alt="Random Image" class="rounded-lg mb-4">
        <button class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded transition duration-200">Read More</button>
    </div>
</div>

Componente Visualizzazione contenuto

Un componente di visualizzazione dei contenuti con design glassmorphism con layout reattivo e supporto per temi scuri.

Apri anteprima

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="bg-white dark:bg-gray-800 bg-opacity-30 backdrop-blur-md rounded-lg shadow-lg p-6 max-w-lg">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white">Featured Content</h2>
    <p class="text-gray-700 dark:text-gray-300 mt-2">This is a content display component that utilizes glassmorphism design principles. It features a blurred background and translucent elements for a modern look.</p>
    <div class="mt-4">
      <img src="https://picsum.photos/300/200" alt="Random Image" class="rounded-lg" />
    </div>
    <div class="mt-4 flex items-center">
      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800 mr-3" />
      <span class="text-gray-600 dark:text-gray-300">John Doe</span>
    </div>
  </div>
</div>

Categorie

Componenti di visualizzazione dei contenuti