JSFiddle - React, Tailwind, and code Playground

by smlombardi

HTML

<div class="challenges create build">
    <div class="step" id="invite-signup">
        <p class="prompt">Do you want to <b>invite Teams</b> to your challenge or <b>create a sign up sheet</b>?</p>
        <div class="choices cf">
            <div class="cf" style="margin-bottom:10px">
                <label for="invite" class="button no-radio">Invite Teams
                    <input type="radio" name="invite-type" value="0" id="invite">
                </label>
                <br>
                <label for="sheet" class="button no-radio">Create a Sign Up Sheet
                    <input type="radio" name="invite-type" value="1" id="sheet">
                </label>
            </div>	<a href="#" class="submit-button flush">Submit</a>

        </div>
    </div>
    <div class="challenge-summary">
        <div class="cf header">
            	<h2>Team Summary</h2>

            <div class="blue-button">	<a href="#" id="start-over">Start Over</a>

            </div>
        </div>
        <div id="inv-type"></div>
        <dl id="summary">	<dt>Team Name</dt>

            <dd class="tn"></dd>	<dt>Captain</dt>

            <dd class="cap"></dd>	<dt>Message</dt>

            <dd class="msg"></dd>	<dt>Owner</dt>

            <dd class="black">I am the owner of this challenge and participants will see my email address</a>
            </dd>
        </dl>
    </div>
</div>

CSS

.challenges.create .challenge-summary {
    background-color: #f6f6f6;
}
.challenges.create .challenge-summary.plain {
    background-color: #fff;
}
.challenges.create .challenge-summary .header {
    border-bottom: 1px solid #ededed;
    height: 50px;
    padding: 7px;
    background-color: #fff;
    -moz-border-radius-topleft: 6px;
    -webkit-border-top-left-radius: 6px;
    border-top-left-radius: 6px;
    -moz-border-radius-topright: 6px;
    -webkit-border-top-right-radius: 6px;
    border-top-right-radius: 6px;
}
.challenges.create .challenge-summary .header h2 {
    font-weight: bold;
    font-size: 16px;
    float: left;
    margin-top: 5px;
    margin-left: 0;
    text-align: left;
}
.challenges.create .challenge-summary .header .blue-button {
    width: 135px;
    margin: 0 auto 50px;
    float: right;
    padding: 5px;
}
.challenges.create .challenge-summary ul {
    padding: 20px;
    font-size: 14px;
}
.challenges.create .challenge-summary ul li {
    font-size: 12px;
    padding: 6px 0;
}
.challenges.create .challenge-summary ul li:first-letter {
    font-weight: bold;
}
.challenges.create .challenge-summary ul li.active {
    font-weight: bold;
    color: #00c3e9;
    background-color: white;
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
}
.challenges.create .challenge-summary .bottom-text {
    background-color: #fff;
    padding: 10px;
    -moz-border-radius-bottomleft: 6px;
    -webkit-border-bottom-left-radius: 6px;
    border-bottom-left-radius: 6px;
    -moz-border-radius-bottomright: 6px;
    -webkit-border-bottom-right-radius: 6px;
    border-bottom-right-radius: 6px;
    border-top: 1px solid #ededed;
}
.challenges.create .challenge-summary .bottom-text h2 {
    font-weight: bold;
    margin-bottom: 10px;
}
.challenges.create .challenge-summary .bottom-text h3 {
    font-weight: bold;
    font-size: 14px;
    margin: 10px 0 5px;
}
.challenges.create .challenge-summary .bottom-text p {
    font-size: 12px;
   ...

JavaScript

$('#invite-signup .submit-button').click(function () {
    if ($("input:radio[name='invite-type']").is(":checked")) {
        var value = $("input[name='invite-type']:checked").val()
        var answers = ['Participants will be added and  invited to this team', 'A Sign Up Sheet will be created'];
        $('#inv-type').text(answers[value]);
    } else {
        alert('Please choose an invite type.');
    }
    return false;
});