Tailwind CSS 톺아보기

Tailwind CSS 톺아보기 · cho.sh

import Head from 'next/head'

const index = () => (
  <>
    <Head>
      <title>Create Next App</title>
      <meta name="description" content="Generated by create next app" />
      <link rel="icon" href="/favicon.ico" />
    </Head>
    <h1>H1 Title</h1>
  </>
)

export default index

module.exports = {
  purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

import Image from 'next/image'
import Favicon from '../../public/favicon.ico'

const chatbubble = () => (
  <div className="flex h-screen">
    <div className="p-6 max-w-sm m-auto bg-white rounded-xl shadow-md flex items-center space-x-4 border-2">
      <div className="shrink-0 relative">
        <div className="h-12 w-12">
          <Image layout="fill" src={Favicon} alt="Favicon" />
        </div>
      </div>
      <div>
        <div>
          <div className="text-xl font-medium text-black">Chat Bubble</div>
          <p className="text-gray-500">You have a message.




        </div>
      </div>
    </div>
  </div>
)

export default chatbubble

import Image from 'next/image'

const CaseStudyCard = () => (
  <div className="flex h-screen">
    <div className="max-w-md m-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl border-2">
      <div className="md:flex">
        <div className="md:shrink-0">
          <div className="h-48 object-cover md:h-full md:w-48 relative">
            <Image src="https://cataas.com/cat" alt="Man looking at item at a store" layout="fill" objectFit="cover" />
          </div>
        </div>
        <div className="p-8">
          <div className="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Case study</div>
          <a href="#" className="block mt-1 text-lg leading-tight font-medium text-black hover:underline">
            Finding customers for your new business
          </a>
          <p className="mt-2 text-gray-500">
            Getting a new business off the ground is a lot of hard work. Here are five ideas you can use to find your
            first customers.





        </div>
      </div>
    </div>
  </div>
)

export default CaseStudyCard

const UserEmailForm = () => {
  const signupUser = async (event: React.FormEvent) => {
    event.preventDefault()
  }
  return (
    <div className="flex h-screen p-6 bg-green-100">
      <div className="m-auto space-y-3">
        <div className="w-full px-6 py-5 mx-auto space-y-1 overflow-hidden transition duration-500 transform border-2 border-green-500 border-opacity-25 rounded-lg cursor-pointer select-none hover:border-2 group hover:shadow-lg motion-reduce:transform-none hover:scale-105">
          <p className="text-lg font-semibold text-green-600">New Project




          <p className="text-green-500">Create a new project from a variety of starting templates.




        </div>
        <form className="flex w-full m-auto mx-auto space-x-3" onSubmit={signupUser}>
          <input
            className="flex-1 w-full px-4 py-2 text-base text-gray-700 placeholder-gray-400 transition duration-500 transform bg-white border-2 border-green-500 border-opacity-25 rounded-lg appearance-none hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-green-600 focus:border-transparent motion-reduce:transform-none hover:scale-105"
            placeholder="Your Email"
            type="email"
          />
          <button
            className="shrink-0 px-4 py-2 text-base font-semibold text-white transition duration-500 transform bg-green-600 rounded-lg hover:shadow-lg focus:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:ring-offset-green-200 motion-reduce:transform-none hover:scale-105 tramsform"
            type="button"
          >
            Sign up
          </button>
        </form>
      </div>
    </div>
  )
}

export default UserEmailForm

text

className={`w-full px-6 py-5 mx-auto space-y-1 overflow-hidden
transition duration-500 transform border-2 border-green-500
border-opacity-25 rounded-lg cursor-pointer select-none hover:border-2
group hover:shadow-lg motion-reduce:transform-none hover:scale-105`}

Tailwind CSS 톺아보기

프로젝트 목표

완성본 미리 보기

원본 자료

#0 프로젝트 설정

#1 Tailwind를 Next에 추가

#2 디자인 코드 분석

1. Chat Bubble

원본 코드와 변경점

키워드 분석

2. Case Study Card

원본 코드와 변경점

키워드 분석

3. User Email Form

원본 코드와 변경점

키워드 분석

분석