JSFiddle - React, Tailwind, and code Playground

by xeraphim

HTML

<div class="gateuebersicht mb-4">

    <div id="idee">
        <div class="rectangle">
            <span class="mt-3 ml-3">Idee</span>
            <div class="rectangle-left">
                
            </div>
        </div>
    </div>

    <div id="gate-a" class="passed">
        <div class="gate">
            <div class="rectangle-left"></div>
            <div class="gate-middle">
                <span class="mt-3 ml-3">A</span>
            </div>
            <div class="rectangle-right"></div>
        </div>
    </div>

    <div id="vorprojekt">
        <div class="rectangle">
            <span class="mt-1 ml-4">Vorprojekt / Initialisierung</span>
            <div class="rectangle-right"></div>
            <div class="rectangle-left"></div>
        </div>
    </div>

    <div id="gate-b">
        <div class="gate">
            <div class="rectangle-left"></div>
            <div class="gate-middle">
                <span class="mt-3 ml-3">B</span>
            </div>
            <div class="rectangle-right"></div>
        </div>
    </div>

    <div id="konzept">
        <div class="rectangle">
            <span class="mt-1 ml-4">Konzept / MVP </span>
            <div class="rectangle-right"></div>
            <div class="rectangle-left"></div>
        </div>
    </div>

    <div id="gate-c">
        <div class="gate">
            <div class="rectangle-left"></div>
            <div class="gate-middle">
                <span class="mt-3 ml-3">C</span>
            </div>
            <div class="rectangle-right"></div>
        </div>
    </div>

    <div id="realisierung">
        <div class="rectangle">
            <span class="mt-3 ml-4">Realisierung</span>
            <div class="rectangle-right"></div>
        </div>
        <div class="rectangle-end"></div>
    </div>

    <div id="einfuehrung">
        <div class="rectangle">
            <span class="mt-3 ml-4">EinfĂĽhrung</span>
            <div class="rectangle-right"></div>
            <div...

SCSS

.gateuebersicht {
    width: 100%;
    height: 60px;
}

.rectangle {
    width: 130px;
    height: 60px;
    background-color: #aaaaaa;
    float: left;

    .passed & {
        background-color: #179f96;
    }

    span {
        position: absolute;
        color: white;
        max-width: 85px;
    }
}

.rectangle-left {
    border-style: solid;
    border-width: 30px 15px 30px 0;
    border-color: transparent #fff transparent transparent;
}

.rectangle-right {
    border-style: solid;
    border-width: 30px 0 30px 15px;
    border-color: transparent transparent transparent #fff;
    float: left;
}

.rectangle-end {
    border-style: solid;
    border-width: 30px 0 30px 15px;
    border-color: transparent transparent transparent #aaaaaa;
    float: left;

    .passed & {
        border-color: transparent transparent transparent #179f96;
    }
}

.gate {
    overflow: hidden;
    float: left;
}

.gate .rectangle-left {
    border-color: transparent #aaaaaa transparent transparent;
    overflow: hidden;
    float: left;

    .passed & {
        border-color: transparent #179f96 transparent transparent;
    }
}

.gate .rectangle-right {
    border-color: transparent transparent transparent #aaaaaa;
    overflow: hidden;
    float: left;

    .passed & {
        border-color: transparent transparent transparent #179f96;
    }
}

.gate-middle {
    width: 40px;
    height: 60px;
    background-color: #aaaaaa;
    overflow: hidden;
    float: left;

    .passed & {
        background-color: #179f96;
    }

    span {
        position: absolute;
        color: white;
    }
}