JSFiddle - React, Tailwind, and code Playground

by iBertel

HTML

<div id="wrapper">

<div id="header_nav" data-size="big">
<ul>
<li>Punkt1</li>
<li>Punkt2</li>
<li>Punkt3</li>
<li>Punkt4</li>
</ul>
</div>

</div>

CSS

* {padding:0px; margin:0px;}
#wrapper {height:1200px; width:960px; background-color:#567; margin:auto;}

#header_nav {position:fixed; width:960px; height:auto; background-color:#678; overflow:hidden;}

JavaScript

<!DOCTYPE html>

    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    
        <div id="mgntx-banner-wrap" style="position:relative; width:180px; height:auto; float:left; font-family:arial;">
            
            <a href="#">
            <div id="mgntx-banner-wrap-top" style="background-image:url(gfx/top.jpg); width:180px; height:60px;">
            
            </div>
            </a>
            
            <div id="mgntx-banner-wrap-center" style="background-image:url(gfx/center.jpg); width:180px; height:327px;">
            
            <div align="center" style="position:absolute; color:#FFF; font-weight:bold; padding:30px 10px 10px 10px;">
            <p class="mgntx-txt-banner">Hvor meget får de efterladte, hvis du dør før tid?</p>
            </div>
            
                
                <div align="center" id="mgntx-slct-form-wrap" style="position:absolute; top:220px; left:10px; width:160px;">        
                        <form class="mgntx-slct-form">
                            <select style="width:160px; height:30px; font-size:14px; padding-top:3px;">
                              <option value="valg">Vælg</option>
                              <option value="100.000">100.000</option>
                              <option value="150.000">150.000</option>
                              <option value="200.000">200.000</option>
                            </select>
                        </form>
                    </div>
            
            </div>
            
            <a href="#">
            <div id="mgntx-banner-wrap-bottom" style="background-image:url(gfx/bottom.jpg); width:180px; height:60px;">
                <div class="mgntx-form-price-wrap" style="position:absolute; top:263px; left:0px; width:180px; height:auto;">
                    <p class="mgntx-form-price" style="text-align:center; color:#FFFFFF;">250 kr. pr. mdr.</p>
                </div>
            </div>
            </a>
 ...