JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE HTML>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<link rel="stylesheet" href="meinestyles.css">
<style>
#mywrapper main * {
margin: 0;
padding: 0;
}
#mywrapper main , header , footer { width:100%; margin:0px auto; padding:10px; font-family: 'Poiret One'; line-height:20px; letter-spacing:1px; box-sizing:border-box;}
#mywrapper main,
header,
footer {
margin: 0px auto;
padding: 10px;
font-family: 'Tahoma';
line-height: 20px;
letter-spacing: 1px;
box-sizing: border-box;
}
#mywrapper main {
background:white;
}
#mywrapper header {
background:white;
color: Black;
padding: 1em;
font-weight: bold;
text-align: center;
border:0px solid grey;
}
#mywrapper section {
padding: 10px 0;
text-align: center;
}
#mywrapper article {
text-align: center;
background: lightgrey;
padding: 2px;
margin-right: 10px;
width:50%;
font-weight: 400;
}
#mywrapper article h1 {
font-size: 2vw;
border: 1px solid grey;
}
#mywrapper article a {
color: #8B4513;
font-weight: bold;
}
#mywrapper .descripe h3 {
padding: 10px;
font-weight: bold;
font-size: 1.2em;
}
#mywrapper h3 {
padding: 10px;
font-weight: bold;
font-size: 1.8em;
line-height: 2.0;
}
#mywrapper p {
padding: 10px;
}
#mywrapper footer{
padding: 10px;
background: transparent;
text-align: right;
color: black;}
#mywrapper footer a {
color: brown;
}
...