JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Egészség</title>
    <meta charset="uft-8" />
    <meta name="author" content="Petényi Viktor, Bognár István, Bartos Márk" />
    <meta name="keywords" content="Egészség" />
    <meta name="description" content="Egészség" />
    <link rel="stylesheet" href="style.css" />
</head>
<body id="wrapper">
    <header>
        <a href="index.html" class="logo">Egészség</a>
    </header>
    <div id="ribbon">
        <span class="left_triangle"></span>
        <span class="right_triangle"></span>
    </div>
    <div style="padding-bottom: 30px;"></div>
    <nav id="navigation">
        <ul>
            <li>Egészség</li>
            <li>Menu 1</li>
            <li>Menu 2</li>
        </ul>
    </nav>
    <section id="content">
        <article style="margin: 20px;">
            <h1>Egészséges életmód tanácsok</h1>
            <h2>Hogyan éljünk egészséges életmódot?</h2>
            <br />
            <p>A tudatosan élő emberek napjainkban erre a témára nagyon odafigyelnek. Minden ember szeretne egészséges lenni, azonban a népesség csupán elenyésző 10%-a tesz is érte, hogy megőrizze egészségét, és most nem arra gondolok, hogy bizonyos betegség esetén orvoshoz fordul. Az egészséges életmód  eléréséhez nem szükséges semmi más csupán, az hogy odafigyeljünk a táplálkozásunkra, valamint mozogjunk eleget. Főként az ősz végén valamint a téli hónapokban nagyon fontos odafigyelnünk arra, hogy megfelelően pótoljuk a szervezet számára esszenciális vitaminokat, erre már rengeteg mód van, ugyanis tele vannak a boltok a jobbnál-jobb vitaminokkal. Az egészséges életmódban a táplálkozásnak nagyobb szerepe van, mint a testmozgásnak, ezt fontos megjegyeznünk. Igaz, azonban az hogy a média, napjainkban tele van olyan hirdetésekkel, amelyek azt hivatottak a hallgatók, vagy a nézők tudtára adni, hogy a mozgás sokkal fontosabb az egészséges életmód eléréséhez, mint a táplálkozás! Mozogni azonban nem mindenkinek van ideje, a mai rohanó világban....

CSS

#content
{
    padding-bottom: 30px;
}
#wrapper
{
    border: 1px solid;
    border-radius: 2em;
    -moz-border-radius: 2em;
    -webkit-border-radius: 2em;
    box-shadow: 0 0 15px #999;
    -moz-box-shadow: 0 0 15px #999;
    -webkit-box-shadow: 0 0 15px#999;
    margin: 6em auto 0em auto;
    width: 60em;
}
#ribbon
{
    background: #474747;
    border: 1px solid #999;
    height: 5em;
    margin: 2em 0em 0em -1.5em;
    width: 63em;
}
.left_triangle
{
    display: block;
    border-color: transparent transparent transparent #474747;
    border-style: solid;
    border-width: 16px;
    -moz-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    position: relative;
    left: 6px;
    top: 64.5px;
    width: 0px;
    height: 0px; 
}
.right_triangle
{
    display: block;
    border-color: transparent transparent transparent #474747;
    border-style: solid;
    border-width: 16px;
    transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    position: relative;
    left: 969px;
    top: 32px;
    width: 0px;
    height: 0px;
}
#navigation ul
{
    position: absolute;
    top: 108px;
    left: 123px;
}
#navigation li
{
    color: #B9B9B9;
    -webkit-transition: background 0.4s ease-in-out;
       -moz-transition: background 0.4s ease-in-out;
       -o-transition: background 0.4s ease-in-out;
       -ms-transition: background 0.4s ease-in-out;
       transition: background 0.4s ease-in-out;
    list-style-type: none;
    float: left;
    font-size: 18px;
    margin: 5px;
    padding: 30px 10px 30px 10px;
}
#navigation li:hover,
#navigation li:focus,
#navigation li:active
{
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#599bdc), to(#3072b3));
    background: -moz-linear-gradient(#A9A9A9, #6E6E6E);
    background: -o-linear-gradient(#599bdc, #3072b3);
    background: linear-gradient(#599bdc, #3072b3);
    cursor: pointer;
}
a.logo,
a.logo:link,
a.logo:visited
{
    color: black;
   ...