Home
$@(\/)(\/)Y
Stars: Sun and Moon Illustrations

Stars: Sun and Moon Illustrations

I Created Sun and Moon Illustrations with Tailwind CSS, Embracing Light and Dark Modes

This tailwind example is contributed by $@(\/)(\/)Y, on 06-Apr-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are Typography, Title, h1, h2, h3

Header Hero Heading

$$@(\/)(\/)Y profile image$

Author $@(\/)(\/)Y

3.6k

6

Fork Fullscreen

<div
    class="w-full h-screen bg-gradient-to-tl via-sky-700/50 from-sky-700/30 to-white dark:bg-gradient-to-tr dark:from-black dark:to-gray-600">

<div
        class="dark:hidden block w-[10rem] h-[10rem] rounded-full grid place-items-center absolute left-4 top-2  cursor-pointer [transition:all_400ms_ease] hover:-translate-y-[1rem]">

<div class="w-[5rem] h-[5rem] brightness-150 absolute bg-yellow-200/60 blur z-50 rounded-full rotate-[68deg]">
        </div>
        <div
            class="w-[6rem] h-[6rem] brightness-150 absolute bg-white/60 blur-sm brightness-200 contrast-200 z-40 rounded-full rotate-[68deg]">
        </div>
        <div
            class="w-[7rem] h-[7rem] brightness-150 absolute bg-gray-100 brightness-200 contrast-200 blur-sm z-30 -lg rounded-full">
        </div>
        <div class="w-[8rem] h-[8rem] absolute bg-yellow-300/10 brightness-200 contrast-200 blur-lg z-20 rounded-full shadow-2xl shadow-yellow-700/10">
        </div>
        <div class="w-[9rem] h-[9rem] brightness-200 contrast-200 absolute bg-white blur-sm z-10 rounded-full shadow-3xl">
        </div>
        <div
            class="brightness-200 contrast-200 blur-sm [box-shadow:0_0px_30px_30px_#fff] rounded-full w-[10rem] h-[10rem]">

</div>
    </div>

<div
        class="hidden dark:block w-[10rem] h-[10rem] rounded-full shadow-2xl shadow-white grid place-items-center absolute right-2 top-2  cursor-pointer [transition:all_400ms_ease] hover:shadow-2xl hover:shadow-gray-900 hover:-translate-y-[1rem]">

<div
            class="w-[6rem] h-[6rem] absolute bg-gradient-to-r from-black to-gray-900 blur-lg rounded-full animate-[spinIn_10s_linear_infinite]">
        </div>
        <div
            class="w-[7rem] h-[7rem] absolute bg-gradient-to-tr via-gray-900 from-black to-gray-900 blur-lg z-30 rounded-full">
        </div>
        <div
            class="w-[8rem] h-[8rem] absolute bg-gradient-to-tl via-black/90 from-white to-gray-100 z-20 blur-sm rounded-full">
        </div>
        <div
            class="w-[9rem] h-[9rem] absolute bg-gradient-to-tr via-gray-100 from-gray-50 to-white z-10 blur-lg rounded-full animate-[spinIn_80s_linear_infinite]">
        </div>
        <p
            class="bg-gradient-to-r from-white to-white shadow-2xl shadow-white brightness-200 contrast-200 rounded-full w-[10rem] h-[10rem]">

<div class="absolute -rotate-[360deg] text-white text-sm font-serif font-semibold"></div>
        </p>
    </div>
</div>

Related Examples

Hero section
Hero section for your project

Author:
Prajwal Hallale

2 years ago

8.9k
Header with svg background

Author:
R.P Ketan

2 years ago

12.8k
Full-page header for landing pages
an attention-grabbing header with a strong message and clear calls to action.

Author:
Junclarkaizen Pagu

1 year ago

10.8k
Hero

Author:
Aman kumar

1 year ago

6k
Hero Section
Home hero section search bar

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

1 year ago

6.5k
Yoga Coach Hero Section

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

1 year ago

4.5k
Portfolio Hero Section 1
visually stunning and captivating hero section component for your portfolio website.

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

11 months ago

4.2k
Portfolio Hero Section 3
visually stunning and captivating hero section component for your portfolio website.

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

11 months ago

6.7k
Tailwind Hero Section
Fully Responsive Hero Section with Navbar

Author:
AKASH GANDHAR

10 months ago

3.7k
Tailwind Pricing Section
Fully Responsive Pricing Section

Author:
AKASH GANDHAR

9 months ago

1.3k
Tailwind Pricing Section 2
Fully Responsive Pricing Section

Author:
AKASH GANDHAR

9 months ago

1.4k
Section Heading
A gorgeous section heading with a smooth blur element.

Author:
Coastal UI

6 months ago

840

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2025 TailwindFlex. All Rights Reserved.

v1.1