JSFiddle - React, Tailwind, and code Playground

by Matt Anderson

HTML

<link rel="stylesheet" href="http://static.beyondhosting.net/css/bootstrap.css">
<link rel="stylesheet" href="http://static.beyondhosting.net/css/bh2.css">
<link rel="stylesheet" href="http://static.beyondhosting.net/css/whmcs.css">
<div class ="pageContent">
    <h2>Alerts</h2>
    <div>
        <div class = "alertRecipient">
            <h3>Matt Anderson</h3>
            <span><input name="uId1Email" id="uId1Email" type = "checkbox" /> <label for ="uId1Email">Email</label></span>
            <span><input name="uId1Text" id="uId1Text" type = "checkbox" /> <label for ="uId1Text">Text</label></span>
        </div>
        
        <div class = "alertRecipient">
            <h3>Matthew Kelch</h3>
            <span><input name="uId2Email" id="uId2Email" type = "checkbox" /> <label for ="uId2Email">Email</label></span>
            <span><input name="uId2Text" id="uId2Text" type = "checkbox" /> <label for ="uId2Text">Text</label></span>
        </div>
        
    </div>
</div>

CSS

div.alertRecipient span input,
div.alertRecipient span label {
    display: inline-block;
}

div.alertRecipient span input {
    line-height: 20px;
    margin-top: 3px;
}

JavaScript

/*
    Profile Object:
    {
        'userId' : 'xxxx',
        'name' : 'yyyyy',
        'unixTime': 1234567890,
        
        'recipients' : [
            {
                'id' : zzzz,
                'isSubAccount' : false,
                'textAlert' : true,
                'emailAlert' : false
            }
        ]
    }

*/