JSFiddle - React, Tailwind, and code Playground

by von

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue-agile"></script>
    <link rel="stylesheet" href="https://unpkg.com/vue-agile/dist/VueAgile.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.1/css/all.min.css">
    <style>
        #app {
            font-family: "Lato", sans-serif;
            font-weight: 300;
            margin: 0 auto;
            max-width: 900px;
            padding: 30px;
        }
        .main {
            margin-bottom: 30px;
        }
        .thumbnails {
            margin: 0 -5px;
            width: calc(100% + 10px);
        }
        .agile__nav-button {
            background: transparent;
            border: none;
            color: #ccc;
            cursor: pointer;
            font-size: 24px;
            -webkit-transition-duration: 0.3s;
            transition-duration: 0.3s;
        }
        .thumbnails .agile__nav-button {
            position: absolute;
            top: 50%;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
        }
        .thumbnails .agile__nav-button--prev {
            left: -45px;
        }
        .thumbnails .agile__nav-button--next {
            right: -45px;
        }
        .agile__nav-button:hover {
            color: #888;
        }
        .agile__dot {
            margin: 0 10px;
        }
        .agile__dot button {
            background-color: #eee;
            border: none;
            border-radius: 50%;
            cursor: pointer;
            display: block;
            height: 10px;
            font-size: 0;
            line-height: 0;
            margin: 0;
            padding: 0;
            -webkit-transition-duration: 0.3s;
            transition-duration: 0.3s;
            width: 10px;
        }
        .agile__dot--current button,...