JSFiddle - React, Tailwind, and code Playground
by Nicholas Berlette
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.9/tailwind.min.css">
<link rel="stylesheet" href="https://fonts.flourd.com/api/WhitneySSm.css?w=500">
<link rel="stylesheet" href="https://fonts.flourd.com/api/WhitneySSm.css?w=700">
<link rel="stylesheet" href="https://fonts.flourd.com/api/WhitneySSm.css?w=300">
<style>
.page-title, .title {
font-family: 'Idlewild';
font-weight: 300;
word-spacing: -1em;
font-kerning: auto;
}
.page-title em, .title em {
font-family: sans-serif !important;
padding: 0 0.25em;
}
.page-title {
padding: 10px 20px;
}
.bold, .title.bold {
font-weight: 700 !important;
}
.contact > * + *::before {
content: "-";
}
a::before {
text-decoration: none !important;
color: #ccc;
text-decoration-color: transparent;
border-color: transparent;
}
</style>
<div class="container py-12 px-12">
<div class="py-8 px-0 text-center text-xl">
<h1 class="page-title mt-4 mb-0 p-0 pt-4 text-gray-600 drop-shadow-md text-xl w-auto relative">nick.berlette.com</h1>
<div class="pt-0 p-2 text-center text-sm">
<span class="font-bold">apps
<span style="font-weight: normal;">• digital • print • seo</span>
</span> ––
<span class="italic">las vegas</span> •
<span class="italic">san diego</span>
</div>
<div class="text-center pt-4">
<span class="title bold text-sm text-center block border-t-2 border-gray-300 pt-4 inline-block">about</span>
</div>
</div>
<div class="p-2 text-center text-6xl text-gray-300">· · ·</div>
<div class="p-2 text-center">
I'm a full-stack developer from San Diego, currently based in Las Vegas. If you're looking to build your brand's online presence, update an existing setup, or just get some advice from a seasoned tech consultant, then it sounds like we should talk!
</div>
<div class="p-2 text-center">
I make it my mission to always...