JSFiddle - React, Tailwind, and code Playground

by Kelly Hawker

HTML

<div class="quickCont dmBlockElement itlRight itlIconLeft"> <span class="ltiEach"> <a value="tel:03 8560 4377" label="" type="call" href="tel:03 8560 4377" raw_url="tel:03 8560 4377"> <span class="ltiIconCon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1408 1792"> <path fill="inherit" d="M1408 1240q0 27-10 70.5t-21 68.5q-21 50-122 106-94 51-186 51-27 0-52.5-3.5t-57.5-12.5-47.5-14.5-55.5-20.5-49-18q-98-35-175-83-128-79-264.5-215.5t-215.5-264.5q-48-77-83-175-3-9-18-49t-20.5-55.5-14.5-47.5-12.5-57.5-3.5-52.5q0-92 51-186 56-101 106-122 25-11 68.5-21t70.5-10q14 0 21 3 18 6 53 76 11 19 30 54t35 63.5 31 53.5q3 4 17.5 25t21.5 35.5 7 28.5q0 20-28.5 50t-62 55-62 53-28.5 46q0 9 5 22.5t8.5 20.5 14 24 11.5 19q76 137 174 235t235 174q2 1 19 11.5t24 14 20.5 8.5 22.5 5q18 0 46-28.5t53-62 55-62 50-28.5q14 0 28.5 7t35.5 21.5 25 17.5q25 15 53.5 31t63.5 35 54 30q70 35 76 53 3 7 3 21z"></path> 
</svg> 
</span> 
 <span class="ltiTextCon">03 8560 4377</span> 
</a> 
</span> 
 <span class="ltiEach"> <a value="https://www.facebook.com/stuartandhunt" label="" type="url" href="https://www.facebook.com/stuartandhunt" raw_url="https://www.facebook.com/stuartandhunt" target="_blank"> <span class="ltiIconCon"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"> <path d="M375.1,288l14.2-92.7h-88.9v-60.1c0-25.3,12.4-50.1,52.2-50.1h40.4V6.3c0,0-36.7-6.3-71.7-6.3
	c-73.2,0-121.1,44.4-121.1,124.7v70.6h-81.4V288h81.4v224h100.2V288H375.1z"></path> 
</svg> 
</span> 
 <span class="ltiTextCon"></span> 
</a> 
</span> 
 <span class="ltiEach"> <a value="https://twitter.com/StuartandHunt" label="" type="url" href="https://twitter.com/StuartandHunt" raw_url="https://twitter.com/StuartandHunt" target="_blank"> <span class="ltiIconCon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1664 1792"> <path fill="inherit" d="M1620 408q-67 98-162...

CSS

.quickCont { margin-top:8px; margin-bottom:8px; }
.quickCont a { text-decoration:none; }
.quickCont.itlIconLeft { padding:0; text-align:center; }
.quickCont.itlIconLeft .ltiEach { display:inline-block; vertical-align:middle; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; padding-top:0; padding-bottom:0; padding-left:10px; padding-right:10px; border-right-width:1px; border-right-style:solid; border-right-color:#cccccc; }
    
.quickCont.itlIconLeft .ltiEach:last-child { border:0 !important; }

.quickCont.itlIconLeft .ltiIconCon { width:32px; height:32px; display:inline-block; vertical-align:middle; text-align:right; }
.quickCont.itlIconLeft .ltiIconCon.iconBg { padding:8px 9px 0 9px; border-radius:50%; background-color:#CC0000; }
.quickCont.itlIconLeft .ltiTextCon { vertical-align:middle; }
    
.itlIconLeft.itlCent { text-align:center !important; }
.itlIconLeft.itlRight { text-align:right !important; }
.itlIconLeft.itlLeft { text-align:left !important; }

/*** ICON ABOVE ***/

.quickCont.itlIconTop { display: flex; flex-flow: row wrap; justify-content: space-evenly; padding: 0; margin: 0;  }
.quickCont.itlIconTop .ltiEach { display:block; width:33%;  margin-bottom:10px; }
.quickCont.itlIconTop .ltiIconCon { display:block; width:60px; height:60px; margin-bottom:20px; }

.itlIconTop.itlCent .ltiEach { text-align:center !important; }
.itlIconTop .ltiIconCon { margin:0 auto; padding:12px 15px; border-style:solid; border-width:3px; border-color:transparent; background-color:transparent; border-radius:50%; }

/*** ICON LEFT LIST ***/

.quickCont.itlIconLeftList { padding:0; text-align:left; }
.quickCont.itlIconLeftList .ltiEach { display:block; vertical-align:middle; }
.quickCont.itlIconLeftList .ltiEach { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; padding:5px 10px; border:0; }
    
.quickCont.itlIconLeftList .ltiEach:last-child { border:0 !important; }

.quickCont.itlIconLeftList...