JSFiddle - React, Tailwind, and code Playground

by rohanbhangui

HTML

<div id="la-quarra">
                        <a href="http://laquarra.it" title="la quarra accomodation in Tuscany Italy">La Quarra</a>
                    </div>
                    <div id="effecorta-network">
                        <a href="http://effecorta.it" title="effecorta network">Effecorta</a>
                    </div>
                    <div id="pmes-consulting">
                        <a href="http://pmesconsulting.com" title="pmes consulting">P.M.E.S. Consulting</a>
                    </div>
                    <div id="pycsser">
                        <a href="http://csser.alwaysdata.net/" title="pycsser web application">PyCSSer</a>
                    </div>
                    <div id="invicta-theatrical-company">
                        <a href="http://compagniainvicta.altervista.org/" title="compagnia teatrale amatoriale lucchese invicta">Compagnia teatrale Invicta</a>
                    </div>
                    <div id="poesie-1983-book">
                        <a href="http://cattalini.altervista.org/" title="poesie 1983">Poesie 1983</a>
                    </div>
                    <div id="nazional-room">
                        <a href="http://nazionalrooms.com/" title="nazional room bed and breakfast a roma">Nazional rooms</a>
                    </div>
                    <div id="korean-dictionary">
                        <a href="http://www.koreandictionary.net/" title="free korean Dictionary">Korean dictionary</a>
                    </div>
                    <div id="italian-dictionary">
                        <a href="http://www.italiandictionary.org/" title="italian dictionary" rel="nofollow">Italian dictionary</a>
                    </div>
                    <div id="german-dictionary">
                        <a href="http://www.germandictionary.org/" title="german dictionary" rel="nofollow">German dictionary</a>
                    </div>
                    <div id="japanese-dictionary">
                       ...

CSS

* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding: 0;
    margin: 0;
}

html, body {
    width: 100%;
    height: 100%;
}

#la-quarra,
#effecorta-network,
#pmes-consulting,
#pycsser,
#invicta-theatrical-company,
#poesie-1983-book,
#nazional-room,
#korean-dictionary,
#italian-dictionary,
#german-dictionary,
#japanese-dictionary,
#spanish-dictionary,
#vietnamese-dictionary,
#greek-dictionary {
    float: left;
    width: 50%;
    height: 50%;
    border: 1px solid silver;
}

#la-quarra a,
#effecorta-network a,
#pmes-consulting a,
#pycsser a,
#invicta-theatrical-company a,
#poesie-1983-book a,
#nazional-room a,
#korean-dictionary a,
#italian-dictionary a,
#german-dictionary a,
#japanese-dictionary a,
#spanish-dictionary a,
#vietnamese-dictionary a,
#greek-dictionary a {
    display: block;
    width: 100%;
    height: 100%;
    margin-top: 25%;
    font-size: 1.5em;
    text-decoration: none;
    color: #666666;
}