JSFiddle - React, Tailwind, and code Playground

by Jason Land

HTML

<div id="hex3" class="hexagon-wrapper">
    <div id="color" class="hexagon">
        <div>
            <img id="logo" class="img-responsive" src="http://test.qobbler.com/logo.png" alt="Qobbler">
        </div>
        <script>
            document.write("launching in");
        </script>
        <noscript>
            <div id="js-error"> <span>This website works best with JavaScript enabled</span>

            </div>
        </noscript>
        <div id="clock"></div>
        <form id="demo-form" data-parsley-validate data-parsley-type-email-message="Email format invalid" action="http://qobbler.us8.list-manage.com/subscribe/post" method="POST">
            <!-- Form Action URL -->
            <input type="hidden" name="u" value="d89da698018bae0aa9e074835">
            <!-- URL Identifier -->
            <input type="hidden" name="id" value="3324f57e67">
            <!-- List ID -->
            <div class="row" id="Mailchimp">
                <div class="input-group" data-toggle="tooltip" data-placement="top" id="top" title="And start building your email campaign.">
                    <input class="form-control email" type="text" name="MERGE0" data-parsley-trigger="change" data-parsley-type="email" data-parsley-error-container=".parsley-container" placeholder="Setup a mailing list"> <span class="input-group-btn">
                            <button class="btn btn-default" type="submit">Go</button>
                            </span>

                </div>
            </div>
        </form>
        <!-- MailChimp Form End -->
                <div id="error" class='parsley-container'></div>
    </div>
</div>
<!-- Prefixfree.js allows you to write prefix-free CSS This means no -webkit-transform, -moz-transform, ... -->
<script src="//cdn.jsdelivr.net/prefixfree/1.0.7/prefixfree.min.js"></script>

CSS

#hex3 {
    width: 400px;
    height: 400px;
}
#color {
    background-color: rgba(0, 0, 0, .1);
}
.hexagon-wrapper {
    text-align: center;
    margin: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    display: inline-block;
}
.hexagon {
    height: 100%;
    width: calc(100% * 0.57735);
    display: inline-block;
}
.hexagon:before {
    position: absolute;
    top: 0;
    right: calc((100% / 2) - ((100% * 0.57735) / 2));
    background-color: inherit;
    height: inherit;
    width: inherit;
    content:'';
    transform: rotateZ(60deg);
}
.hexagon:after {
    position: absolute;
    top: 0;
    right: calc((100% / 2) - ((100% * 0.57735) / 2));
    background-color: inherit;
    height: inherit;
    width: inherit;
    content:'';
    transform: rotateZ(-60deg);
}
.img-responsive {
    z-index: 9;
}