Home
Hamza Atig
Clean Component Sharing Hub (Landing State)

Clean Component Sharing Hub (Landing State)

A minimalist, "before-talking" landing screen designed for a code or design component sharing platform. Features a welcoming header, three distinct action cards for sharing/browsing/exporting code, and a floating input bar, all styled with soft shadows and ample white space mimicking modern design tools.

This tailwind example is contributed by Hamza Atig, on 27-Dec-2025. Component is made with Tailwind CSS v3. It is responsive.

Other

Author Hamza Atig

Fork Fullscreen

<button class="flex items-center gap-2 px-4 py-2 bg-white rounded-full soft-shadow text-sm font-medium text-gray-700 hover:bg-gray-50 transition">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
              <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5m-13.5-9L12 3m0 0 4.5 4.5M12 3v13.5" />
            </svg>
            Share Context
        </button>
    </header>

<main class="flex-1 flex flex-col items-center justify-center px-4 sm:px-6 lg:px-8 pb-32 max-w-5xl mx-auto w-full">
        
        <div class="text-center mb-16 relative z-10">
            <div class="w-16 h-16 mx-auto bg-white rounded-2xl soft-shadow flex items-center justify-center mb-8">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-8 h-8 text-indigo-500">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75 22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3-4.5 16.5" />
                </svg>
            </div>
            <h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-4 tracking-tight">Ready to build, Alex.</h1>
            <p class="text-lg text-gray-500">What component are we crafting or sharing today?</p>
        </div>

<div class="bg-white p-6 rounded-[2rem] soft-shadow flex flex-col h-full group hover:-translate-y-1 transition-all duration-300">
                <div class="w-10 h-10 bg-blue-50 text-blue-500 rounded-xl flex items-center justify-center mb-4 group-hover:bg-blue-100 transition-colors">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M14.25 9.75 16.5 12l-2.25 2.25m-4.5 0L7.5 12l2.25-2.25M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
                    </svg>
                </div>
                <h3 class="text-lg font-semibold text-gray-900 mb-2">Share a snippet</h3>
                <p class="text-sm text-gray-500 mb-8 flex-grow leading-relaxed">Paste HTML, CSS, or React code to generate a shareable link for your team.</p>
                <button class="w-full py-3 bg-gray-50 hover:bg-gray-100 text-gray-900 text-sm font-medium rounded-xl transition-colors">
                    Create Snippet
                </button>
            </div>

<div class="bg-white p-6 rounded-[2rem] soft-shadow flex flex-col h-full group hover:-translate-y-1 transition-all duration-300">
                <div class="w-10 h-10 bg-purple-50 text-purple-500 rounded-xl flex items-center justify-center mb-4 group-hover:bg-purple-100 transition-colors">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25A2.25 2.25 0 0 1 13.5 18v-2.25Z" />
                    </svg>
                </div>
                <h3 class="text-lg font-semibold text-gray-900 mb-2">Explore UI Kits</h3>
                <p class="text-sm text-gray-500 mb-8 flex-grow leading-relaxed">Browse community-verified components and popular libraries for inspiration.</p>
                <button class="w-full py-3 bg-gray-50 hover:bg-gray-100 text-gray-900 text-sm font-medium rounded-xl transition-colors">
                    Browse Kits
                </button>
            </div>

<div class="bg-white p-6 rounded-[2rem] soft-shadow flex flex-col h-full group hover:-translate-y-1 transition-all duration-300">
                <div class="w-10 h-10 bg-green-50 text-green-500 rounded-xl flex items-center justify-center mb-4 group-hover:bg-green-100 transition-colors">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M9 8.25H7.5a2.25 2.25 0 0 0-2.25 2.25v9a2.25 2.25 0 0 0 2.25 2.25h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25H15m0-3-3-3m0 0-3 3m3-3V15" />
                    </svg>
                </div>
                <h3 class="text-lg font-semibold text-gray-900 mb-2">Export Design</h3>
                <p class="text-sm text-gray-500 mb-8 flex-grow leading-relaxed">Convert your current canvas selection into clean Tailwind or CSS modules.</p>
                <button class="w-full py-3 bg-gray-50 hover:bg-gray-100 text-gray-900 text-sm font-medium rounded-xl transition-colors">
                    Export Code
                </button>
            </div>
        </div>
    </main>

</body>
</html>

Related Examples

Concert ticket

Author:
Elijah Davis

2 years ago

13.4k
Coffee Menu

Author:
ariaw

3 months ago

516
TASK FAILED SUCCESSFULLY
TradingGoose Ep2 MockUp

Author:
Bruz

4 months ago

244
YouTube Community Post UI Mockup
A static HTML and Tailwind CSS component mimicking the user interface of a YouTube Community Post. This mockup features the channel header (avatar, name, verified badge, timestamp), post content (text and optional media), engagement actions (Like, Dislike, Comment, Share with counts), and the 'Add a comment' section. It's designed to be responsive, supports YouTube's light and dark themes via custom styling, and uses accurate iconography.

Author:
Hamza Atig

8 months ago

941
Calculator
A Basic Calculator

Author:
Debbie F

1 year ago

1.9k
Instagram Post UI Mockup
A static HTML and Tailwind CSS component that visually replicates the user interface of an Instagram post. This mockup includes the post header (avatar, username, options), image area, action buttons (like, comment, share, save), like count, caption, and comment section. It features responsive constraints and supports both light and dark mode, closely mimicking the look and feel of the actual Instagram app. Ideal for UI prototyping, style guides, or frontend development practice.

Author:
Hamza Atig

8 months ago

1.2k
Ethical Fashion

Author:
Tanvir Hasan Bappy (Tanvir)

10 months ago

1.1k
Team Members

Author:
Abdul Baset Bappy

6 months ago

941
Testimonial that What Client Says

Author:
Abdul Baset Bappy

6 months ago

791
App Hero Section With header

Author:
Abdul Baset Bappy

6 months ago

955
Linear infinite brand scrolling with hover effect
Beautiful lineat brand scrolling partner with hover effect

Author:
Walid Ahmad

1 year ago

2.5k
Clean & Responsive Footer Design with Tailwind CSS With CTA Button
modern and responsive footer built with Tailwind CSS to enhance website navigation, accessibility, and user experience. Featuring quick links, social media icons, copyright info, and a sleek layout, this SEO-friendly footer improves engagement and usability across all devices. Perfect for portfolios, business websites, and eCommerce stores!

Author:
Abdul Baset Bappy

9 months ago

872

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components