JSFiddle - React, Tailwind, and code Playground

by piiantom

HTML

<div style="font-size: 12px;"><div class="slider">

    <div class="slide active">
        <a href="/1.html" class="headerVideoLink">
            <video muted>
                <source src="/videos/trucks-driving.mp4" type="video/mp4">
            </video>
        </a>
    </div>

    <div class="slide">
        <a href="/2.html" class="headerVideoLink">
            <video muted>
                <source src="/videos/money-moving.mp4" type="video/mp4">
            </video>
        </a>
    </div>

    <div class="slide">
        <a href="/3.html" class="headerVideoLink">
            <video muted>
                <source src="/videos/trucks-driving.mp4" type="video/mp4">
            </video>
        </a>
    </div>

    <div class="slide">
        <a href="/4.html" class="headerVideoLink">
            <video muted>
                <source src="/videos/globe-spinning.mp4" type="video/mp4">
            </video>
        </a>
    </div>

    <div class="slide">
        <a href="/5.html" class="headerVideoLink">
            <video muted>
                <source src="/videos/arrow-target.mp4" type="video/mp4">
            </video>
        </a>
    </div>

</div></div><!-- slider -->

CSS

.slider{
    list-style: none;
    display: block;
    width: 100%;
    overflow: hidden;
    position: relative;
    font-size: 0;
    white-space: nowrap;
}

.slider .slide{
    display: inline-block;
    margin: 0;
    padding: 0;
    border-radius: 0px;
    overflow: hidden;
    opacity: 0.15;
    width: 100%;
    cursor: pointer;
    -webkit-transition: opacity 800ms ease-in-out;
    transition: opacity 800ms ease-in-out;
}

.slider .slide.active{
    opacity: 1;
    cursor: default;
    -webkit-transition: opacity 800ms ease-in-out;
    transition: opacity 800ms ease-in-out;
}