JSFiddle - React, Tailwind, and code Playground

by Farzad Cyrus

HTML

<!-- MAP BACKGROUND -->
        <div class="animation animation-map">
            <div class="animation-container">
                <div class="animation-item-1">
                    <div class="animation-map-marker-1">
                        <em class="animation-map-icon icon"><i class="fi-location4"></i></em>
                        <div class="animation-map-location"></div>
                    </div>
                    <div class="animation-map-journey"></div>
                    <div class="animation-map-marker-2">
                        <em class="animation-map-icon icon"><i class="fi-location4"></i></em>
                        <div class="animation-map-location"></div>
                    </div>
                </div>
                <div class="animation-item-2"></div>
                <div class="animation-item-3"></div>
                <div class="animation-item-4"></div>
                <div class="animation-item-5"></div>
                <div class="animation-item-6"></div>
                <div class="animation-item-7"></div>
            </div>
        </div>

CSS

.animation-map {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 0;
    padding: 48px;
    margin: 0;
}

.animation-map .animation-container {
    width: 100%;
    height: 100%;
    position: relative;
}

.animation-map [class^="animation-item"] {
    width: 240px;
    height: 240px;
    position: absolute;
    top: 0;
    left: 0;
}

.animation-map .animation-item-1 { top: 120px; left: 60px; 	background: rgba(255, 255, 255, 0.4); }
.animation-map .animation-item-2 { top: 400px; left: 400px; }
.animation-map .animation-item-3 { top: 600px; left: 600px; }
.animation-map .animation-item-4 { top: 800px; left: 800px; }


.animation-map [class^="animation-map-marker"] {
    width: 48px;
    height: 48px;
    position: absolute;
    z-index: 2;
}
.animation-map .animation-map-marker-1 {
    top: 8px;
	left: -8px;
}
.animation-map .animation-map-marker-2 { bottom: 0; right: 0; }

.animation-map .animation-map-icon {
    position: absolute;
	top: 50%;
	left: 50%;
	width: 32px;
	height: 32px;
	color: #d7c9c7;
	font-size: 32px;
	line-height: 32px;
	margin: -32px 0 0 -16px;
	z-index: 1;
}

.animation-map .animation-map-location {
    width: 12px;
	height: 12px;
	background-color: #ffffff;
	border-radius: 1000px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -6px 0 0 -6px;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);
}


@keyframes animation-map-journey {
    0% {
        
        
        border-radius: 0;
        transform: rotate(0deg);
        transform: scale(0.8);
        
    }
    100% {
        
        border-radius: 1000px;
        transform: rotate(45deg);
    }
}

.animation-map .animation-map-journey,
.animation-map .animation-map-journey:before,
.animation-map .animation-map-journey:after {
    position: absolute;
	top: 0;
	left: 0;
	width: 120px;
	height: 120px;
	border-radius: 0;
	border-width: 8px;
	border-style: solid;
	z-index: 1;
	background-color: rgba(0, 0, 0, 0.01);
	border-color: rgba(0, 0, 0, 0);
	content:...