JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">

            <header id="header">
            <div class="inside">
                
<!-- indexer::stop -->
<div id="brand">
	<a target="_top" href="http://www.demo.de"><img alt="demo " src="/files/demo/layout/images/demo.png" id="logo"></a>
	<div id="userfunctions">
		<div id="languages"><a href="http://www.demo.com/languages"><img alt="" src="/files/demo/layout/images/icons/languages.png"></a></div>
		<div id="quicksearch">
			<img alt="Suche" src="/files/demo/layout/images/icons/search.png">
			<form action="suche" method="get"><input type="search" placeholder="Suche" class="q" name="keywords"><input type="image" alt="Suche" src="/files/demo/layout/images/icons/search.png" class="b"></form>
		</div>
	</div>
</div>
<div class="contextmenu_wrap"></div>

<!-- indexer::continue -->
            </div>
        </header>
        <div class="clear"></div>
    
            <div id="Breadcrumb">
            <div class="inside">
                
<!-- indexer::stop -->
<div class="mod_breadcrumb block">

  
  <ul>
                  <li class="first"><a title="demo" href="">demo.de </a>  &gt;</li>
                        <li><a title="Seite1" href="seite1">Seite 1</a>  &gt;</li>
                        <li><a title="Seite2" href="seite2">Seite 2</a>  &gt;</li>
                        <li class="active last">Print </li>
            </ul>

</div>
<!-- indexer::continue -->
            </div>
        </div>
        <div class="clear"></div>
    
    
    
    <div id="main">
        <div class="inside">
            <div id="content">
                 
<div id="print" class="mod_article block">

  
  
<div class="ce_text block">

      <h1>Lorem ipsum dolor</h1>
  
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit...

CSS

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul {
    border: 0 none;
    font-size: 100%;
    font-style: normal;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
ol, ul {
    list-style: none outside none;
}
:focus {
    outline: 0 none;
}
figure {
    margin: 0;
}
img {
    border: 0 none;
    vertical-align: middle;
}
.clear {
    clear: both;
}
.invisible {
    display: none;
}
* {
    outline: medium none;
}
@media screen {
body {
    background: none repeat scroll 0 0 #2D353C;
    color: #000;
    font-family: "myriad-pro-n4","myriad-pro",sans-serif;
    font-style: normal;
}
.inside {
    margin: 0 auto;
}
hr {
    background-color: #CED0D6;
    border: 0 none;
    color: #000;
    height: 1px;
    margin: 20px 0;
}
.border {
    border-bottom: 1px solid #C0C2C4;
}
#contextmenu p {
    margin: 0;
}
#contextmenu {
    background: none repeat scroll 0 0 #FFFFFF;
    display: none;
    padding: 15px;
    width: 361px;
}
.contextmenu_wrap {
    margin: 0 auto;
    position: relative;
}
#header {
    background: none repeat scroll 0 0 #000000;
    border-bottom: 5px solid #FFFFFF;
    overflow: hidden;
}
#header .inside {
    width: auto;
}
#brand {
    margin: 15px auto;
    overflow: hidden;
    position: relative;
}
#brand.home {
    overflow: visible;
}
#userfunctions {
    position: absolute;
    right: 0;
    top: 8px;
}
#languages {
    position: absolute;
    right: 40px;
}
#quicksearch {
    position: absolute;
    right: 0;
    text-align: right;
}
#quicksearch form {
    background: none repeat scroll 0 0 #000000;
    opacity: 0;
    position: absolute;
    right: 0;
    top: -100px;
    transition: opacity 0.5s ease 0s;
  ...