JSFiddle - React, Tailwind, and code Playground

by harianus

HTML

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400&amp;blabla.css">
<div class="font1">
     <h1>Social Shop 0 O (#1)</h1>

    <p>Heb je net een boek uit dat iedereen moet lezen? Of een vakantiehuis waar iedereen geweest moet zijn? De Social Shop is dé plek om die dingen met vrienden te delen. Bovendien kunnen ze via jou kopen voor een vriendenprijs. Zoek nu jouw favorieten. Je kan al kiezen uit miljoenen producten!</p>
</div>
<div class="font2">
     <h1>Social Shop 0 O (#2)</h1>

    <p>Heb je net een boek uit dat iedereen moet lezen? Of een vakantiehuis waar iedereen geweest moet zijn? De Social Shop is dé plek om die dingen met vrienden te delen. Bovendien kunnen ze via jou kopen voor een vriendenprijs. Zoek nu jouw favorieten. Je kan al kiezen uit miljoenen producten!</p>
</div>
<div class="font3">
     <h1>Social Shop 0 O (#3)</h1>

    <p>Heb je net een boek uit dat iedereen moet lezen? Of een vakantiehuis waar iedereen geweest moet zijn? De Social Shop is dé plek om die dingen met vrienden te delen. Bovendien kunnen ze via jou kopen voor een vriendenprijs. Zoek nu jouw favorieten. Je kan al kiezen uit miljoenen producten!</p>
</div>

CSS

h1, p {
    font-family: 'Montserrat', 'Metrophobic', Arial, sans-serif;
}
div h1 {
    font-style: normal;
    font-size: 80px;
    line-height: 80px;
    color: #53606a;
}
div p {
    color: #a9afb4;
    line-height: 30px;
    font-size: 18px;
}
.font1 {
    -webkit-text-stroke: 1px rgba(0, 0, 0, 0.1);
}
.font2 {
    -webkit-font-smoothing: antialiased;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
}
.font3 {
}