JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://fonts.googleapis.com/css?family=Roboto:400,700"></script>
<script src="https://s30.postimg.org/tzosj54fl/image.png"></script>
<script src="https://s30.postimg.org/3snln6m5t/image.png"></script>
<script src="https://s30.postimg.org/6b9anv7w1/image.png"></script>
<script src="https://s30.postimg.org/ei1affxyp/image.png"></script>
<script src="https://s30.postimg.org/4m4stjhkh/image.png"></script>
<div class="expert-bio-list-wrapper">
<div class="expert-bio-list-header">Top 5 Challanges I can Help Address</div>
<ol class="expert-bio-list">
<li>
What are the best practices for measuring and optimizing digital marketing programs?
</li>
<li>
What are best practices for building and managing analytics teams?
</li>
<li>
How can marketers tie digital marketing efforts to business results?
</li>
<li>
How should marketers select and implement tools/partners for digital analytics?
</li>
<li>
What are the best practices for building a marketing analytics dashboard?
</li>
<li>
What are the best practices for building a marketing analytics dashboard?
</li>
<li>
What are the best practices for building a marketing analytics dashboard?
</li>
<li>
What are the best practices for building a marketing analytics dashboard?
</li>
<li>
What are the best practices for building a marketing analytics dashboard?
</li>
</ol>
</div>
<!-- <div class="expert-bio-list-wrapper">
<div class="expert-bio-list-header">Top 5 Challanges I can Help Address</div>
<ol class="expert-bio-list">
<li class="expert-bio-list-item">
<p>What are the best practices for measuring and optimizing digital marketing programs?</p>
</li>
<li class="expert-bio-list-item">
<p>What are best practices for building and managing analytics teams?</p>
</li>
<li class="expert-bio-list-item">
<p>How can marketers tie digital marketing...
SCSS
.expert-bio-list-header {
width: 498px;
height: 26px;
font-family: 'Roboto', sans-serif;
font-size: 30px;
font-weight: 500;
line-height: 0.87;
text-align: left;
color: #000000;
padding: 0 0 40px 0;
}
@mixin child-properties(){
background-size: 57px 53.5px;
display: inline-block;
width: 68.5px;
height: 53.5px;
content: "";
margin-right: 16px;
}
.expert-bio-list {
margin: 0;
padding: 0;
list-style-type: none;
li {
counter-increment: step-counter;
font-family: Roboto;
font-size: 18px;
line-height: 1.44;
text-align: left;
color: #5c5c5c;
display: flex;
margin: 0 0 20px 0;
p{
flex: 1;
margin: 10px 0;
padding-left: 30px;
}
&:nth-child(1) {
&:before {
background-image: url('https://s26.postimg.org/r8tc4whnd/1_Icon.png');
width: 79.5px !important;
@include child-properties();
}
}
&:nth-child(2) {
&:before {
background-image: url('https://s26.postimg.org/hpjnbfu55/2_Icon.png');
width: 62.4px !important;
@include child-properties();
}
}
&:nth-child(3) {
&:before {
background-image: url('https://s26.postimg.org/744dd6d7d/3_Icon.png');
width: 62.2px !important;
@include child-properties();
}
}
&:nth-child(4) {
&:before {
background-image: url('https://s26.postimg.org/4bb5t5cux/4_icon.png');
width: 75px !important;
@include child-properties();
}
}
&:nth-child(5) {
&:before {
background-image: url('https://s26.postimg.org/5rmobafrt/5_icon.png');
@include child-properties();
}
}
&:nth-child(6) {
&:before {
background-image: url('https://s26.postimg.org/fjg5pgbx5/6_icon.png');
@include...