-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathYoutubeThumbnail.html
More file actions
47 lines (46 loc) · 7.09 KB
/
YoutubeThumbnail.html
File metadata and controls
47 lines (46 loc) · 7.09 KB
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
<div class="min-h-screen grid place-items-center p-4 bg-gray-900">
<div class="relative w-[640px] h-[360px] bg-white overflow-hidden">
<!-- Top-left circle -->
<div aria-hidden="true" class="absolute -top-16 -left-12 w-[200px] h-[200px] bg-purple-200 rounded-full grid place-items-center">
<svg class="w-[64px] h-[72px] ml-3 mt-3" viewBox="0 0 64 72" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M60 29.0718C65.3333 32.151 65.3333 39.849 60 42.9282L12 70.641C6.66668 73.7202 1.16801e-05 69.8712 1.19493e-05 63.7128L1.4372e-05 8.28719C1.46412e-05 2.12878 6.66668 -1.72022 12 1.35899L60 29.0718Z" fill="white" />
</svg>
</div>
<!-- Right big circle -->
<div aria-hidden="true" class="absolute w-[512px] h-[512px] bg-purple-200 rounded-full -top-20 -right-56"></div>
<!-- Images -->
<div class="absolute top-10 right-8">
<img src="https://www.dropbox.com/s/6lipca71meyf9f2/image-1.jpg?raw=1" alt="YouTuber cheerfully giving a shaka" class="w-64 h-36 object-cover rounded-2xl shadow-2xl rotate-3" />
<img src="https://www.dropbox.com/s/sox1969sc1o6my9/image-2.png?raw=1" alt="Screenshot of Tailwind CSS code" class="w-64 h-36 object-cover rounded-2xl shadow-2xl -rotate-3 translate-x-16 -translate-y-2" />
</div>
<!-- Play button -->
<div class="absolute right-12 inset-y-0 grid items-center">
<a href="#" class="w-12 h-12 bg-purple-500 rounded-full ring-4 ring-white grid place-items-center hover:bg-purple-400 transition">
<span class="sr-only">Watch the video</span>
<svg class="ml-1 w-4" viewBox="0 0 16 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15 7.26795C16.3333 8.03775 16.3333 9.96225 15 10.7321L3 17.6603C1.66667 18.4301 1.01267e-06 17.4678 1.07997e-06 15.9282L1.68565e-06 2.0718C1.75295e-06 0.532196 1.66667 -0.430054 3 0.339746L15 7.26795Z" fill="white" />
</svg>
</a>
</div>
<!-- Content -->
<div class="relative p-8 flex flex-col justify-end h-full space-y-4 w-2/3">
<p class="uppercase font-semibold text-xs text-purple-600 tracking-wider">How we'd build it</p>
<h1 class="text-4xl font-extrabold text-gray-900">YouTube Thumbnail with Tailwind CSS</h1>
<svg class="w-36" viewBox="0 0 145 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.1917 0C11.1406 0 8.60861 2.02555 7.59583 6.07667C9.115 4.05111 10.8874 3.29153 12.9129 3.79792C14.0686 4.08684 14.8946 4.92525 15.809 5.85335C17.2984 7.3652 19.0223 9.115 22.7875 9.115C26.8386 9.115 29.3706 7.08944 30.3833 3.03833C28.8642 5.06389 27.0918 5.82347 25.0662 5.31708C23.9106 5.02816 23.0845 4.18975 22.1702 3.26165C20.6808 1.7498 18.9569 0 15.1917 0ZM7.59583 9.115C3.54472 9.115 1.01278 11.1406 0 15.1917C1.51917 13.1661 3.29153 12.4065 5.31708 12.9129C6.47277 13.2018 7.29881 14.0402 8.21312 14.9683C9.70258 16.4802 11.4264 18.23 15.1917 18.23C19.2428 18.23 21.7747 16.2044 22.7875 12.1533C21.2683 14.1789 19.496 14.9385 17.4704 14.4321C16.3147 14.1432 15.4887 13.3047 14.5744 12.3766C13.0849 10.8648 11.3611 9.115 7.59583 9.115Z" fill="#06B6D4" />
<path d="M44.4694 8.11684V5.93366H41.8664V2.44233L39.5992 3.11408V5.93366H37.668V8.11684H39.5992V13.1549C39.5992 15.8839 40.9847 16.8496 44.4694 16.4297V14.3935C42.7481 14.4774 41.8664 14.4984 41.8664 13.1549V8.11684H44.4694Z" fill="#111827" />
<path d="M54.408 5.93366V7.4241C53.6103 6.33251 52.3718 5.66076 50.7344 5.66076C47.8795 5.66076 45.5074 8.05386 45.5074 11.1817C45.5074 14.2885 47.8795 16.7026 50.7344 16.7026C52.3718 16.7026 53.6103 16.0309 54.408 14.9183V16.4297H56.6752V5.93366H54.408ZM51.0913 14.5404C49.202 14.5404 47.7745 13.134 47.7745 11.1817C47.7745 9.22942 49.202 7.82295 51.0913 7.82295C52.9806 7.82295 54.408 9.22942 54.408 11.1817C54.408 13.134 52.9806 14.5404 51.0913 14.5404Z" fill="#111827" />
<path d="M60.4513 4.35925C61.249 4.35925 61.8998 3.6875 61.8998 2.91079C61.8998 2.11309 61.249 1.46233 60.4513 1.46233C59.6536 1.46233 59.0029 2.11309 59.0029 2.91079C59.0029 3.6875 59.6536 4.35925 60.4513 4.35925ZM59.3177 16.4297H61.5849V5.93366H59.3177V16.4297Z" fill="#111827" />
<path d="M64.2173 16.4297H66.4844V1.10547H64.2173V16.4297Z" fill="#111827" />
<path d="M81.2083 5.93366L79.151 13.1759L76.9678 5.93366H74.8057L72.6015 13.1759L70.5652 5.93366H68.1721L71.4679 16.4297H73.6931L75.8972 9.35537L78.0804 16.4297H80.3056L83.6014 5.93366H81.2083Z" fill="#111827" />
<path d="M86.4045 4.35925C87.2022 4.35925 87.8529 3.6875 87.8529 2.91079C87.8529 2.11309 87.2022 1.46233 86.4045 1.46233C85.6068 1.46233 84.956 2.11309 84.956 2.91079C84.956 3.6875 85.6068 4.35925 86.4045 4.35925ZM85.2709 16.4297H87.538V5.93366H85.2709V16.4297Z" fill="#111827" />
<path d="M95.6913 5.66076C94.2639 5.66076 93.1303 6.18556 92.4376 7.27715V5.93366H90.1704V16.4297H92.4376V10.8038C92.4376 8.66263 93.6131 7.78096 95.1036 7.78096C96.531 7.78096 97.4547 8.62065 97.4547 10.216V16.4297H99.7218V9.98514C99.7218 7.25616 98.0425 5.66076 95.6913 5.66076Z" fill="#111827" />
<path d="M110.476 1.73523V7.4241C109.678 6.33251 108.44 5.66076 106.802 5.66076C103.947 5.66076 101.575 8.05386 101.575 11.1817C101.575 14.2885 103.947 16.7026 106.802 16.7026C108.44 16.7026 109.678 16.0309 110.476 14.9183V16.4297H112.743V1.73523H110.476ZM107.159 14.5404C105.27 14.5404 103.842 13.134 103.842 11.1817C103.842 9.22942 105.27 7.82295 107.159 7.82295C109.048 7.82295 110.476 9.22942 110.476 11.1817C110.476 13.134 109.048 14.5404 107.159 14.5404Z" fill="#111827" />
<path d="M120.34 16.7026C122.397 16.7026 124.181 15.632 125.063 13.9736L123.111 12.8611C122.607 13.8267 121.578 14.4774 120.319 14.4774C118.471 14.4774 117.065 13.071 117.065 11.1817C117.065 9.2924 118.471 7.88592 120.319 7.88592C121.578 7.88592 122.607 8.51569 123.069 9.50232L125.021 8.36874C124.181 6.73136 122.397 5.66076 120.34 5.66076C117.17 5.66076 114.798 8.05386 114.798 11.1817C114.798 14.2885 117.17 16.7026 120.34 16.7026Z" fill="#111827" />
<path d="M128.801 8.83057C128.801 8.07485 129.515 7.71799 130.334 7.71799C131.195 7.71799 131.929 8.09584 132.307 8.91454L134.217 7.84394C133.483 6.45846 132.055 5.66076 130.334 5.66076C128.193 5.66076 126.492 6.89929 126.492 8.87255C126.492 12.6301 132.139 11.5805 132.139 13.4488C132.139 14.2885 131.362 14.6244 130.355 14.6244C129.2 14.6244 128.361 14.0576 128.025 13.113L126.072 14.2465C126.744 15.758 128.256 16.7026 130.355 16.7026C132.622 16.7026 134.448 15.569 134.448 13.4698C134.448 9.58628 128.801 10.7409 128.801 8.83057Z" fill="#111827" />
<path d="M138.48 8.83057C138.48 8.07485 139.194 7.71799 140.012 7.71799C140.873 7.71799 141.608 8.09584 141.986 8.91454L143.896 7.84394C143.161 6.45846 141.734 5.66076 140.012 5.66076C137.871 5.66076 136.171 6.89929 136.171 8.87255C136.171 12.6301 141.818 11.5805 141.818 13.4488C141.818 14.2885 141.041 14.6244 140.033 14.6244C138.879 14.6244 138.039 14.0576 137.703 13.113L135.751 14.2465C136.423 15.758 137.934 16.7026 140.033 16.7026C142.3 16.7026 144.127 15.569 144.127 13.4698C144.127 9.58628 138.48 10.7409 138.48 8.83057Z" fill="#111827" />
</svg>
</div>
</div>
</div>