JSFiddle - React, Tailwind, and code Playground

by jmaxwell21

HTML

<div id="applicationSelectPage" data-role="page">
    <div class="application-select-topbar">
        <div class="navbar-item left eighth">
            <a class="topcoat-icon-button--cta back-button" href="#">
                <span class="topcoat-icon topcoat-icon--back"></span>
            </a>
        </div>
    </div>
    <div class="content">
        <div id="actionBar">
            <div class="actionBarButton" id="applicationPhoto"><img src="<%= imageUrl %>new-skin-dark/photos_icon_400x400.png"/>
                <label>BUTTON_PHOTO</label>
            </div>
            <div class="actionBarButton" id="applicationFirst"><img src="<%= externalAppUrl %>first/icon.png"/>
                <label id="firstApplicationLabel">firstAppTitle</label>
            </div>

            <div class="actionBarButton" id="applicationSecond"><img src="<%= externalAppUrl %>second/icon.png"/>
                <label id="secondApplicationLabel">secondAppTitle</label>
            </div>

            <div class="actionBarButton" id="applicationThird"><img src="<%= externalAppUrl %>third/icon.png"/>
                <label id="thirdApplicationLabel">thirdAppTitle</label>
            </div>
        </div>
    </div>
</div>