JSFiddle - React, Tailwind, and code Playground

by justi

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html><body><div class="email-container" style="background-color: #f1f1f1; font-family: \'Open Sans\', \'Helvetica Neue\', Helvetica, sans-serif;">
    <div class="monthly-email" style="background-color: white; color: #444; margin: 20px auto; max-width: 450px; padding: 25px;">
        <h1>Hello from GetBadges!</h1>
        <h2>Monthly summary for Rise games</h2>
        <h3 class="lighter" style="color: #777777;">November 2015</h3>
        <h3>Top 3 users with badges:</h3>
                    <div class="user" style="clear: both; float: left; margin: 1px; width: 100%;">
                                <div class="avatar-box" style="float: none; margin-bottom: 5px; margin-top: 10px; text-align: center;">
                    <hr style="border: 1px solid lightgray;"><div class="avatar" style="text-align: center; width: auto;">
                        <img src="https://www.gravatar.com/avatar/e5d325d2d5cecce45c2274714a779bba?d=retro&amp;s=64" alt="Sofia Zhestovskaya" class="col-md-4 img-circle" style="border-radius: 50%;"></div>
                    <div class="lvl" style="text-align: center;">
                        Sofia Zhestovskaya
                    </div>
                </div>
                <div class="panel-body" style="float: none; margin-bottom: 5px; margin-top: 10px; text-align: center;">
                    <hr style="border: 1px solid lightgray;"><div class="thumbnail" style="display: inline-block; margin: 0 auto;">
                            <div class="badge-container">
                                <img class="badge-image" src="https://getbadges.io//images/55-ticket-close_1.png" title="2 November" style="width: 48px;"><div class="badge-caption">
                                    <h5 class="badge-name" style="font-size: 0.8em; margin: 2px auto; line-height: 2em;">Getting Started</h5>

                                    <p...