JSFiddle - React, Tailwind, and code Playground

by fristyr

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header class="header">
        <img src="img/12.png" alt="Car-Photo" class="img-main-block">
    </header>
    <main class="car-description">
        <h1><b class="title-text">Audi Q2 1.4 TFSI S-TRONIC</b> <span class="title-w"><span class="title-borders">TOP 212 KM/H</span>  0-100 KM/H IN 9.1 S </span></h1>
        <div class="cont-wrapp">
        <section class="first-block">
            <div class="salon-descript">
                    <img src="img/13.png" alt="Inner-Salon">
                    <nav class="salon-text">
                    <p><span>A</span> De Reactie sneilheid van het multimediasysteem zou wat omhoog kunnen</p>
                    <p><span>B</span> Het Afgeplatte sportstuur is een optie van 316 euro.</p>
                    <p><span>C</span> Mooi, clean, opgeruimd dashroad</p>
                    </nav>
                <img src="img/14.png" alt="AUdi">
            </div>
        </section>
        <section class="second-block">
            <article class="articles">
                <h2>Lorem ipsum</h2>
                <p> Lorem ipsum dolor, sit amet consectetur adipisicing elit. 
                        Praesentium quo quas tempore nulla magni ratione ipsam ea mollitia sapiente dignissimos saepe, 
                        culpa ipsa perspiciatis asperiores ullam natus adipisci totam! Consequatur doloremque veritatis cum autem voluptates. 
                        Impedit soluta aut inventore minima voluptas labore quos similique beatae rem. Nobis, delectus enim. 
                        Numquam animi impedit tempore ad cupiditate, saepe ea perferendis repellat dicta accusamus mollitia 
                        magnam blanditiis aut est. Nostrum alias dolore...

CSS

.img-main-block {
    width: 100%;
}

h1,
.first-block {
    margin-left: 50px;
}

.title-borders{
    border-left: 1px solid red;
    border-right: 1px solid red;
    padding-left: 5px;
    padding-right: 5px;
}

.title-w {
    font-weight: 300;
}

.salon-descript img {
    float: left;
    width: 70%;
    margin-right: 15px;
    margin-bottom: 15px;
}

.cont-wrapp {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.first-block,
.second-block {
    width: 50%;
}

.second-block {
    margin-left: 25px;
}

nav > p > span {
    font-weight: bold;
    color: red;
}

.articles p{
    text-align: justify;
    font-size: 22px;
    padding-right: 30px;
}

footer {
    text-align: right;
    margin-top: 25px;
}

footer a {
    text-decoration: none;
    color: black;
}

footer span {
    color: red;
    padding-left: 30px;
    font-weight: bold;
}