JSFiddle - React, Tailwind, and code Playground

by sparebytes

HTML

<div id="theAnchor">
	<!-- Top Left -->
    <div class="b at-tl-tl"></div>
    <div class="b at-tl-tc"></div>
    <div class="b at-tl-tr"></div>
    
    <div class="b at-tl-cl"></div>
    <div class="b at-tl-cc"></div>
    <div class="b at-tl-cr"></div>
    
    <div class="b at-tl-bl"></div>
    <div class="b at-tl-bc"></div>
    <div class="b at-tl-br"></div>

	<!-- Top Right -->
    <div class="r at-tr-tl"></div>
    <div class="r at-tr-tc"></div>
    <div class="r at-tr-tr"></div>
    
    <div class="r at-tr-cl"></div>
    <div class="r at-tr-cc"></div>
    <div class="r at-tr-cr"></div>
    
    <div class="r at-tr-bl"></div>
    <div class="r at-tr-bc"></div>
    <div class="r at-tr-br"></div>

	<!-- Bottom Left -->
    <div class="g at-bl-tl"></div>
    <div class="g at-bl-tc"></div>
    <div class="g at-bl-tr"></div>
    
    <div class="g at-bl-cl"></div>
    <div class="g at-bl-cc"></div>
    <div class="g at-bl-cr"></div>
    
    <div class="g at-bl-bl"></div>
    <div class="g at-bl-bc"></div>
    <div class="g at-bl-br"></div>

	<!-- Bottom Right -->
    <div class="y at-br-tl"></div>
    <div class="y at-br-tc"></div>
    <div class="y at-br-tr"></div>
    
    <div class="y at-br-cl"></div>
    <div class="y at-br-cc"></div>
    <div class="y at-br-cr"></div>
    
    <div class="y at-br-bl"></div>
    <div class="y at-br-bc"></div>
    <div class="y at-br-br"></div>
</div>

CSS

/** Top Left **/

/* V Top */
.at-tl-tl {
    top: 0;
    left: 0;
}
.at-tl-tc {
    top: 0;
    left: 50%;
}
.at-tl-tr {
    top: 0;
    left: 100%;
}

/* V Center */
.at-tl-cl {
    top: 50%;
    left: 0;
}
.at-tl-cc {
    top: 50%;
    left: 50%;
}
.at-tl-cr {
    top: 50%;
    left: 100%;
}

/* V Bottom */
.at-tl-bl {
    top: 100%;
    left: 0;
}
.at-tl-bc {
    top: 100%;
    left: 50%;
}
.at-tl-br {
    top: 100%;
    left: 100%;
}


/** Top Right **/

/* V Top */
.at-tr-tl {
    top: 0;
    right: 0;
}
.at-tr-tc {
    top: 0;
    right: 50%;
}
.at-tr-tr {
    top: 0;
    right: 100%;
}

/* V Center */
.at-tr-cl {
    top: 50%;
    right: 0;
}
.at-tr-cc {
    top: 50%;
    right: 50%;
}
.at-tr-cr {
    top: 50%;
    right: 100%;
}

/* V Bottom */
.at-tr-bl {
    top: 100%;
    right: 0;
}
.at-tr-bc {
    top: 100%;
    right: 50%;
}
.at-tr-br {
    top: 100%;
    right: 100%;
}


/** Bottom Left **/

/* V Top */
.at-bl-tl {
    bottom: 0;
    left: 0;
}
.at-bl-tc {
    bottom: 0;
    left: 50%;
}
.at-bl-tr {
    bottom: 0;
    left: 100%;
}

/* V Center */
.at-bl-cl {
    bottom: 50%;
    left: 0;
}
.at-bl-cc {
    bottom: 50%;
    left: 50%;
}
.at-bl-cr {
    bottom: 50%;
    left: 100%;
}

/* V Bottom */
.at-bl-bl {
    bottom: 100%;
    left: 0;
}
.at-bl-bc {
    bottom: 100%;
    left: 50%;
}
.at-bl-br {
    bottom: 100%;
    left: 100%;
}


/** Bottom Right **/

/* V Top */
.at-br-tl {
    bottom: 0;
    right: 0;
}
.at-br-tc {
    bottom: 0;
    right: 50%;
}
.at-br-tr {
    bottom: 0;
    right: 100%;
}

/* V Center */
.at-br-cl {
    bottom: 50%;
    right: 0;
}
.at-br-cc {
    bottom: 50%;
    right: 50%;
}
.at-br-cr {
    bottom: 50%;
    right: 100%;
}

/* V Bottom */
.at-br-bl {
    bottom: 100%;
    right: 0;
}
.at-br-bc {
    bottom: 100%;
    right: 50%;
}
.at-br-br {
    bottom: 100%;
    right: 100%;
}





.at-tl-tl, .at-tl-tc, .at-tl-tr,
.at-tl-cl, .at-tl-cc, .at-tl-cr,
.at-tl-bl, .at-tl-bc, .at-tl-br,

.at-tr-tl, .at-tr-tc,...