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: 90%;
margin: 0px auto;
padding: 10px;
font-family: 'Poiret One';
line-height: 20px;
letter-spacing: 1px;
box-sizing: border-box;
}
#mywrapper main {
background:white;
}
#mywrapper header {
background:orange;
color: Black;
padding: 1em;
width:calc(90% - 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;
}
#mywrapper article h1 {
font-size: 2vw;
border: 1px solid grey;
}
#mywrapper article:last-child {
margin-right: 0;
}
#mywrapper article a {
color: #8B4513;
font-weight: bold;
}
#mywrapper .descripe h3 {
padding: 10px;
font-weight: bold;
font-size: 1.5em;
}
#mywrapper h3 {
padding: 10px;
font-weight: bold;
font-size: 1.5em;
}
#mywrapper p {
padding: 10px;
}
#mywrapper footer {
padding: 10px;
background: transparent;
text-align: right;
color: #8B4513;
}
#mywrapper footer a {
color: #8B4513;
text-decoration: none;
font-family: sans-serif;
}
...