tabler-ui/src/_includes/cards/transaction-area.html

Premium and Open Source dashboard template with responsive and high quality UI. For Free!

<div class="card">
    <div class="card-body">
        <h3 class="card-title">Recent transaction areas</h3>
        <div class="row">
            <div class="col-md-4 mt-3 mt-md-0">
                <select class="form-control custom-select">
                    <option value="" disabled selected hidden>Choose country</option>
                    <option value="Poland">Poland</option>
                </select>
            </div>
            <div class="col-md-4 mt-3 mt-md-0">
                <select class="form-control custom-select">
                    <option class="text-muted-dark" value="" disabled selected hidden>Choose
                        region
                    </option>
                    <option value="Slask">Slask</option>
                </select>
            </div>
            <div class="col-md-4 mt-3 mt-md-0">
                <select class="form-control custom-select">
                    <option value="" disabled selected hidden>29 Oct 2019</option>
                    <option value="">8 Nov 2089</option>
                </select>
            </div>
        </div>
        <div class="map">
            <div class="map-content" id="map-world-svg"></div>
        </div>
        <table class="table table-responsive-sm table-vcenter card-table">
            <tbody>
            <tr>
                <td width="1"><i class="mdi mdi-facebook mr-2"></i></td>
                <td>Facebook Ads</td>
                <td class="text-muted">$29236</td>
                <td class="text-muted">Turkey</td>
                <td class="text-muted">%18</td>
                <td width="1"><a href=""><i class="si si-arrow-right mr-2"></i></a></td>
            </tr>
            <tr>
                <td><i class="mdi mdi-twitter mr-2"></i></td>
                <td>Twitter</td>
                <td class="text-muted">$8692</td>
                <td class="text-muted">Syrian Arab Republic</td>
                <td class="text-muted">%16</td>
                <td width="1"><a href=""><i class="si si-arrow-right mr-2"></i></a></td>
            </tr>
            <tr>
                <td><i class="mdi mdi-google-analytics mr-2"></i></td>
                <td>Adwords</td>
                <td class="text-muted">$6636</td>
                <td class="text-muted">Singapore</td>
                <td class="text-muted">%20</td>
                <td width="1"><a href=""><i class="si si-arrow-right mr-2"></i></a></td>
            </tr>
            <tr>
                <td><i class="mdi mdi-pinterest mr-2"></i></td>
                <td>Pinterest</td>
                <td class="text-muted">$901</td>
                <td class="text-muted">Burkina Faso</td>
                <td class="text-muted">%28</td>
                <td width="1"><a href=""><i class="si si-arrow-right mr-2"></i></a></td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

<script>
    {% include js/map-world.js id="map-world-svg" map="world_mill" data=site.data.map-world %}
</script>