JSFiddle - React, Tailwind, and code Playground

by Kai_Draord

HTML

<div class="form">
<strong>Choices</strong>
<label class="inline"><input type="checkbox" checked> Item 1</label>
</div>

Usage 2 (missing properties):

<div class="page-width email-preferences-container form">
<?php if($m->loggedin) { ?>
    <a class="act btn btn-sec" href="/page/"><span class="icon-left-big"></span>   BACK TO MY ACCOUNT</a>
<?php } ?>
<h1>
    Prefs <?= $m->email; ?>
</h1>

<form class="internal-form">
    <div class="ops">
        <h3>Yay!</h3>
        <?php foreach($m->preferences->Overrides as $name => $value) : ?>
            <?php if(array_key_exists($name, $m->preferences->OverrideDisplayNames)) : ?>
                <label class="inline">
                    <input id="<?= $name ?>" type="checkbox" name="<?= $name ?>" class="prefs" <?= $value ? 'checked="checked"' : ''?>>
                    <?= $m->preferences->OverrideDisplayNames[$name] ?>
                </label>
            <?php endif ; ?>
        <?php endforeach ?>
    </div>
</form>
</div>

CSS

input[type=checkbox], input[type=radio] {
  vertical-align: middle;
  display: inline-block;
  margin: 2px 2px 2px 2px;
  outline-style: none;
}
input[type=checkbox]:checked, input[type=radio]:checked {
  box-shadow: 0 0 0px 10px;
  border-radius: 20px;
}
input[type=checkbox]:hover .hover-bg, input[type=radio]:hover .hover-bg {
  box-shadow: 0 0 0px 10px;
  border-radius: 20px;
}