JSFiddle - React, Tailwind, and code Playground

by andreasisaak

HTML

<script src="http://fonts.googleapis.com/css?family=Allerta"></script>
<link href='https://www.kw-software.com/tl_files/standard/fonts/aller/stylesheet.css' rel='stylesheet' type='text/css'>
    
    <div id="wrapper">
    
    <div class="ce_text panel x2 y5 wm100 block">
        <div>
            <figure class="image_container"><img width="120" height="50" alt="" src="https://www.kw-software.com/tl_files/standard/images/icons-logos/safety-alliance.png" class="at2x"></figure>
            <h3>Die offene Plattform für <br>die Sicherheitstechnik</h3>
                </div>
            </div>

<div class="ce_text panel y5 x4 block">
    <h3>Support &amp; Service</h3>
</div>

            <div class="ce_panel x2 y4 panel block panel nolink"><div><h3>Karriere bei <br>KW-Software</h3></div></div>

<div class="ce_download panel x3 block"><a title="Download Safety Alliance Flyer" href="https://www.kw-software.com/de/iec-61508-safety/safety-alliance?file=tl_files/standard/downloads/broschueren/iec-61508-safety/Safety-Alliance_Flyer_2012.pdf" class="public">Download<br>Safety Alliance Flyer</a></div>
    
    </div>

CSS

* {
    margin:0;
    padding:0;
    border:0;
}

#wrapper {
    margin: 0 auto;
    max-width: 1200px;
    min-width: 960px;
    position: relative;
    width: 100%;
    margin:5px;
}

.panel {
	width:25%;
    float:left;
	height: 125px;
    background:#9ac9e1; background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjOWFjOWUxIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzY5YTljOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
    background:-moz-linear-gradient(-45deg, #9ac9e1 0%, #69a9c8 100%);
    background:-webkit-gradient(linear, left top, right bottom, color-stop(0%,#9ac9e1), color-stop(100%,#69a9c8));
    background:-webkit-linear-gradient(-45deg, #9ac9e1 0%,#69a9c8 100%);
    background:-o-linear-gradient(-45deg, #9ac9e1 0%,#69a9c8 100%);
    background:-ms-linear-gradient(-45deg, #9ac9e1 0%,#69a9c8 100%);
    background:linear-gradient(135deg, #9ac9e1 0%,#69a9c8 100%);
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#9ac9e1', endColorstr='#69a9c8',GradientType=1 );
    padding:0 10px 20px;
    text-align:center;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-family: 'allerbold';
    color:#fff;
}

.panel h3 {
    font-size: 15px;
    line-height: 20px;
    text-transform: uppercase;
    margin-top:5px;
}

.ce_download.panel a {
    background: url("https://www.kw-software.com/tl_files/standard/layout/images/icon-download-big.png") no-repeat scroll center top transparent;
    color: #FFFFFF;
    font-size:...