JSFiddle - React, Tailwind, and code Playground

by lankarden

HTML

<div>
     <h3>Wie bent u?</h3>

    <p>Dit e-Loket® gebruikt uw persoonsgegevens. U moet zich dus eerst identificeren. Dat kan op verschillende manieren:</p>
    <ul>
        <li>U kunt gewoon <strong>zelf uw gegevens intikken</strong>

        </li>
        <li>U kunt via een kaartlezer uw gegevens automatisch ophalen van uw <strong>elektronische identiteitskaart (eID) of
            Isabel-kaart</strong>. Twijfelt u of uw computer wel klaar is om met uw eID te kunnen werken, dan kunt u via <a href="#">deze
            link</a> uw pc laten testen.</li>
        <li>Maar hebt u een <strong>federaal token</strong>, dan kunt u zich ook daarmee aanmelden.</li>
    </ul>
    <div>Via deze identificatiemethodes kunnen een aantal gegevens automatisch worden ingevuld, zoals naam, voornaam en rijksregisternummer.
        <br>
    </div>
    <br>
     <h3>
          Kies een van de identificatiemethodes en klik op de overeenkomstige knop
          hieronder.
        </h3>

</div>
<div>
    <div class="section">
        <input type="submit" value="Manueel" id="btnAnoniem" title="Verder zonder elektronische identificatie" class="button">Gegevens zelf intikken
        <br>
    </div>
</div>
<div>
    <div class="section">
        <input type="submit" value="Aanmelden" id="btnToken" title="Identificatie met behulp van het federaal Token" class="button buttonToken">Federaal token
        <br>
    </div>
</div>
<div>
    <div class="section">
        <input type="submit" value="Volgende" id="btnVolgendeAsIs" title="Verder met de huidige identificatie" class="button">Verder met de huidige identificatie
        <br>
    </div>
</div>

CSS

body {
    font: 75%/1.231"PT Sans", Arial, sans-serif;
    color: #000;
}
h3 {
    margin: 1.5em 0 .1em 0;
    padding: 0;
    font: bold 1.1em"PT Sans", Arial, sans-serif;
    color: #aaa;
}
ul {
    list-style: none;
}
ul, ol, dl {
    position: relative;
    margin: 0 0 1em .5em;
    padding: 0;
}
.section {
    margin: 5px;
    padding: 5px;
}
input[type=submit], input[type=button], .btn, .btn:link, .btn:visited {
    padding: 6px 12px;
    text-decoration: none;
    color: #181818 !important;
    cursor: pointer;
    background: #e9e9e9;
    border: 1px solid #d6d6d6;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    background-image: -webkit-gradient(linear, bottom, top, color-stop(0, rgba(0, 0, 0, 0.1)), color-stop(0.5, rgba(0, 0, 0, 0)));
    background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 50%);
    background-image: linear-gradient:(bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 50%);
}
input, textarea, select {
    font: normal 1em"PT Sans", Arial, sans-serif;
    color: #404040;
    border: 1px solid #d6d6d6;
}