Tailwind CSS를 사용하여 Google Clone UI 만들기
6705 단어 tutorialtailwindcsscsswebdev
view
예시
Tailwind CSS를 사용하여 Google 클론 UI를 만듭니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tailwind CSS Google UI </title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="flex flex-col items-center justify-center h-screen">
<div class="mb-6">
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="google Logo"
class="object-cover" />
</div>
<div class="flex items-center w-full mx-auto mb-4 border rounded-full lg:max-w-2xl hover:shadow-md">
<div class="pl-5">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-gray-400" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</div>
<input type="text" class="w-full bg-transparent rounded-full py-[14px] pl-4 outline-none" />
<div class="pr-5">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-gray-400 text-blue-600 cursor-pointer" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z" />
</svg>
</div>
</div>
<div class="flex gap-x-6">
<button class="px-3 py-2 text-base font-light cursor-pointer hover:shadow bg-gray-50">Google Search</button>
<button class="px-3 py-2 text-base font-light cursor-pointer hover:shadow bg-gray-50">I'm Feeling Lucky</button>
</div>
<div class="mt-6">
<div class="text-sm">
Google offered in: <span class="ml-2 text-blue-700">हिन्दी বাংলা తెలుగు मराठी தமிழ் ગુજરાતી ಕನ್ನಡ മലയാളം
ਪੰਜਾਬੀ</span>
</div>
</div>
</div>
</body>
</html>
Reference
이 문제에 관하여(Tailwind CSS를 사용하여 Google Clone UI 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/larainfo/create-a-google-clone-ui-using-tailwind-css-576e텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
