|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<html>
<div className="bg-slate-400 py-20 px-10 grid gap-10">
<div className="bg-white overflow-hidden rounded-3xl shadow-xl">
<div className="bg-blue-500 p-6 pb-14">
<span className="text-white text-2xl">Profile</span>
</div>
<div className="rounded-3xl p-6 bg-white relative -top-5">
<div className="flex relative -top-16 items-end justify-between">
<div className="flex flex-col items-center">
<span className="text-sm text-gray-500">Orders</span>
<span className="font-medium">340</span>
</div>
<div className="h-24 w-24 bg-red-400 rounded-full"/>
<div className="flex flex-col items-center">
<span className="text-sm text-gray-500">Spent</span>
<span className="font-medium">$340</span>
</div>
</div>
<div className="relative flex flex-col items-center -mt-10 -mb-5">
<span className="text-lg font-medium">Tony Molloy</span>
<span className="text-sm text-gray-500">미국</span>
</div>
</div>
</div>
</div>
</html>
|
cs |
출처: 노마드코더 캐롯마켓 클론코딩
반응형
'Front-end > CSS' 카테고리의 다른 글
| [CSS] 웹사이트 따라만들기, 반응형 헤더편 (유튜브 드림코딩) (0) | 2022.06.16 |
|---|---|
| [CSS] 애플 웹사이트 인터랙션 클론! (인프런 강의 추천 및 후기) (0) | 2022.06.15 |
