Cosmic 404 — Lost in Space — Tailwind CSS Component | GoSnippets

Loading…

Cosmic 404 — Lost in Space — Tailwind CSS Component | GoSnippets

Source Code

Open in Playground

1<section class="cosmos-stage min-h-screen flex items-center justify-center px-4 relative overflow-hidden">
2  <span class="cosmos-stars" aria-hidden="true">
3    <span class="cosmos-star" style="--x:0%;--y:0%;--d:0s;--s:1px"></span><span class="cosmos-star" style="--x:17%;--y:53%;--d:1s;--s:2px"></span><span class="cosmos-star" style="--x:34%;--y:6%;--d:2s;--s:3px"></span><span class="cosmos-star" style="--x:51%;--y:59%;--d:3s;--s:1px"></span><span class="cosmos-star" style="--x:68%;--y:12%;--d:4s;--s:2px"></span><span class="cosmos-star" style="--x:85%;--y:65%;--d:5s;--s:3px"></span><span class="cosmos-star" style="--x:2%;--y:18%;--d:6s;--s:1px"></span><span class="cosmos-star" style="--x:19%;--y:71%;--d:0s;--s:2px"></span><span class="cosmos-star" style="--x:36%;--y:24%;--d:1s;--s:3px"></span><span class="cosmos-star" style="--x:53%;--y:77%;--d:2s;--s:1px"></span><span class="cosmos-star" style="--x:70%;--y:30%;--d:3s;--s:2px"></span><span class="cosmos-star" style="--x:87%;--y:83%;--d:4s;--s:3px"></span><span class="cosmos-star" style="--x:4%;--y:36%;--d:5s;--s:1px"></span><span class="cosmos-star" style="--x:21%;--y:89%;--d:6s;--s:2px"></span><span class="cosmos-star" style="--x:38%;--y:42%;--d:0s;--s:3px"></span><span class="cosmos-star" style="--x:55%;--y:95%;--d:1s;--s:1px"></span><span class="cosmos-star" style="--x:72%;--y:48%;--d:2s;--s:2px"></span><span class="cosmos-star" style="--x:89%;--y:1%;--d:3s;--s:3px"></span><span class="cosmos-star" style="--x:6%;--y:54%;--d:4s;--s:1px"></span><span class="cosmos-star" style="--x:23%;--y:7%;--d:5s;--s:2px"></span><span class="cosmos-star" style="--x:40%;--y:60%;--d:6s;--s:3px"></span><span class="cosmos-star" style="--x:57%;--y:13%;--d:0s;--s:1px"></span><span class="cosmos-star" style="--x:74%;--y:66%;--d:1s;--s:2px"></span><span class="cosmos-star" style="--x:91%;--y:19%;--d:2s;--s:3px"></span><span class="cosmos-star" style="--x:8%;--y:72%;--d:3s;--s:1px"></span><span class="cosmos-star" style="--x:25%;--y:25%;--d:4s;--s:2px"></span><span class="cosmos-star" style="--x:42%;--y:78%;--d:5s;--s:3px"></span><span class="cosmos-star" style="--x:59%;--y:31%;--d:6s;--s:1px"></span><span class="cosmos-star" style="--x:76%;--y:84%;--d:0s;--s:2px"></span><span class="cosmos-star" style="--x:93%;--y:37%;--d:1s;--s:3px"></span><span class="cosmos-star" style="--x:10%;--y:90%;--d:2s;--s:1px"></span><span class="cosmos-star" style="--x:27%;--y:43%;--d:3s;--s:2px"></span><span class="cosmos-star" style="--x:44%;--y:96%;--d:4s;--s:3px"></span><span class="cosmos-star" style="--x:61%;--y:49%;--d:5s;--s:1px"></span><span class="cosmos-star" style="--x:78%;--y:2%;--d:6s;--s:2px"></span><span class="cosmos-star" style="--x:95%;--y:55%;--d:0s;--s:3px"></span><span class="cosmos-star" style="--x:12%;--y:8%;--d:1s;--s:1px"></span><span class="cosmos-star" style="--x:29%;--y:61%;--d:2s;--s:2px"></span><span class="cosmos-star" style="--x:46%;--y:14%;--d:3s;--s:3px"></span><span class="cosmos-star" style="--x:63%;--y:67%;--d:4s;--s:1px"></span><span class="cosmos-star" style="--x:80%;--y:20%;--d:5s;--s:2px"></span><span class="cosmos-star" style="--x:97%;--y:73%;--d:6s;--s:3px"></span><span class="cosmos-star" style="--x:14%;--y:26%;--d:0s;--s:1px"></span><span class="cosmos-star" style="--x:31%;--y:79%;--d:1s;--s:2px"></span><span class="cosmos-star" style="--x:48%;--y:32%;--d:2s;--s:3px"></span><span class="cosmos-star" style="--x:65%;--y:85%;--d:3s;--s:1px"></span><span class="cosmos-star" style="--x:82%;--y:38%;--d:4s;--s:2px"></span><span class="cosmos-star" style="--x:99%;--y:91%;--d:5s;--s:3px"></span><span class="cosmos-star" style="--x:16%;--y:44%;--d:6s;--s:1px"></span><span class="cosmos-star" style="--x:33%;--y:97%;--d:0s;--s:2px"></span><span class="cosmos-star" style="--x:50%;--y:50%;--d:1s;--s:3px"></span><span class="cosmos-star" style="--x:67%;--y:3%;--d:2s;--s:1px"></span><span class="cosmos-star" style="--x:84%;--y:56%;--d:3s;--s:2px"></span><span class="cosmos-star" style="--x:1%;--y:9%;--d:4s;--s:3px"></span><span class="cosmos-star" style="--x:18%;--y:62%;--d:5s;--s:1px"></span><span class="cosmos-star" style="--x:35%;--y:15%;--d:6s;--s:2px"></span><span class="cosmos-star" style="--x:52%;--y:68%;--d:0s;--s:3px"></span><span class="cosmos-star" style="--x:69%;--y:21%;--d:1s;--s:1px"></span><span class="cosmos-star" style="--x:86%;--y:74%;--d:2s;--s:2px"></span><span class="cosmos-star" style="--x:3%;--y:27%;--d:3s;--s:3px"></span>
4  </span>
5  <span class="cosmos-planet cosmos-p-a"></span>
6  <span class="cosmos-planet cosmos-p-b"></span>
7  <span class="cosmos-planet cosmos-p-c"></span>
8
9  <div class="relative z-10 text-center max-w-xl">
10    <h1 class="cosmos-numeral font-black tracking-tight leading-none mb-5" style="font-size:clamp(7rem,18vw,12rem)">404</h1>
11    <h2 class="text-white font-bold text-2xl sm:text-3xl tracking-tight mb-3">You drifted off-course.</h2>
12    <p class="text-slate-300/80 text-base leading-relaxed mb-8 max-w-md mx-auto">The page you were looking for either got deleted, never existed, or is in another star system. Let's get you back.</p>
13    <div class="flex flex-wrap items-center justify-center gap-3">
14      <a href="#" class="cosmos-primary inline-flex items-center gap-2 px-6 py-3 rounded-full font-semibold text-[14px] text-white">
15        <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2.2"><path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path></svg>
16        Back home
17      </a>
18      <a href="#" class="cosmos-ghost inline-flex items-center gap-2 px-6 py-3 rounded-full font-semibold text-[14px] text-white">Browse components</a>
19    </div>
20  </div>
21</section>