JSFiddle - React, Tailwind, and code Playground

by Danielle Parkinson

HTML

@{
    ViewBag.Title = "Welcome to the easyJet Dashboard";
    ViewBag.BodyId = "home";
}

<div id="units"></div>

<div id="view-content" @*data-type="@DashboardData.CurrentUnit.UnitType.Name"*@ data-location="Home" data-global="true">
    <div class="global-filter-container">
        <div class="row">
            <div class="col-xs-6 filter-text">Filters</div>
            @*@Html.Submitter(new[] {  }, "Submit", "btn btn-info apply-filters")*@
            <a class="col-xs-6 clear-filters">Clear all</a>
        </div>
    </div>

    <div class="grid-container">

        <div class="col-md-12 tile extra-tall">
            <div class="graphic-500-bg">
                <div class="grid-item-content no-border">
                    <div class="col-md-6">
                        <h2>Advocacy</h2>
                    </div>
                    <div class="col-md-6">
                        <h2>Retention</h2>
                    </div>
                </div>
            </div>
        </div>

        @*Replicated in Razor template - included here to test functionality prior to data setup*@
        <div class="col-md-12 tile journey-tall journey">
            <div class="col-md-4 high-level-stage collapsed-medium">
                <h2>Booking Satisfaction</h2>

                <div class="show-in-collapse">
                    <div class="current-score">
                        100%
                        <div class="journey-score-icons">
                            <span class="lnr lnr-ticket"></span>
                            <span class="lnr lnr-ticket"></span>
                            <span class="lnr lnr-ticket"></span>
                            <span class="lnr lnr-ticket"></span>
                            <span class="lnr lnr-ticket"></span><br />
                            <span class="lnr lnr-ticket"></span>
                            <span class="lnr lnr-ticket"></span>
                            <span class="lnr lnr-ticket"></span>
                 ...