#Recreating Moon's stages

7 messages · Page 1 of 1 (latest)

lavish holly
#

How can I recreate these with tailwind css and nextjs

I'm building a color related website

images_6.png
trail gazelleBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

ashen jay
# 
'use client'

import React from 'react';

const moonPhases = [
    { name: 'New Moon', lightClass: 'w-0 h-0', darkClass: 'w-full h-full' },
    { name: 'Waxing Crescent', lightClass: 'w-[25%] h-full right-0', darkClass: 'w-[75%] h-full' },
    { name: 'First Quarter', lightClass: 'w-1/2 h-full right-0', darkClass: 'w-1/2 h-full' },
    { name: 'Waxing Gibbous', lightClass: 'w-[75%] h-full right-0', darkClass: 'w-[25%] h-full' },
    { name: 'Full Moon', lightClass: 'w-full h-full', darkClass: 'w-0 h-0' },
    { name: 'Waning Gibbous', lightClass: 'w-[75%] h-full left-0', darkClass: 'w-[25%] h-full right-0' },
    { name: 'Last Quarter', lightClass: 'w-1/2 h-full left-0', darkClass: 'w-1/2 h-full right-0' },
    { name: 'Waning Crescent', lightClass: 'w-[25%] h-full left-0', darkClass: 'w-[75%] h-full right-0' },
  ];
  
  function Phases() {
    return (
      <div className="bg-gray-900 min-h-screen flex items-center justify-center p-4">
        <div className="bg-gray-800 p-8 rounded-lg shadow-xl max-w-4xl w-full">
          <h2 className="text-2xl font-bold text-white mb-6 text-center">Phases of the Moon</h2>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
            {moonPhases.map((phase, index) => (
              <div key={index} className="flex flex-col items-center">
                <div className="relative w-24 h-24 mb-2">
                  <div className={`moon-phase absolute inset-0 bg-gray-300 rounded-full overflow-hidden`}>
                    <div className={`absolute ${phase.darkClass} bg-gray-800 rounded-full`}></div>
                    <div className={`absolute ${phase.lightClass} bg-gray-300 rounded-full`}></div>
                  </div>
                </div>
                <span className="text-sm text-gray-300 text-center">{phase.name}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    );
  }

export default function Home() {
    return (
      <main>
        <Phases />
      </main>
    );
  }

Its not perfect but its a good starting point for you.

image.png
lavish holly
ashen jay
#

Not sure why the ummm, but no problem.

lavish holly
ashen jay
#

ok