JSFiddle - React, Tailwind, and code Playground

by Lee Collings

HTML

<div class="horoscope">
  <h2><span class="ai aries"></span>Aries</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dignissim justo quis tortor vestibulum malesuada. Mauris aliquet leo magna, vel tincidunt nisi rutrum id. Mauris tempor porttitor dolor, a accumsan lacus pharetra ultricies. Nullam maximus sem in dolor sodales, vel sagittis metus bibendum. Sed convallis velit id fermentum lobortis. Fusce massa lorem, semper sit amet nulla nec, dictum ullamcorper orci. Sed eleifend iaculis erat in pretium. Sed convallis lorem a aliquam luctus. Suspendisse potenti. Quisque tristique blandit mollis. Maecenas ut tellus ac ligula congue dignissim. Morbi auctor fringilla erat lacinia dignissim.</p>
</div>

<div class="horoscope">
  <h2><span class="ai aries"></span>Aries</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dignissim justo quis tortor vestibulum malesuada. Mauris aliquet leo magna, vel tincidunt nisi rutrum id. Mauris tempor porttitor dolor, a accumsan lacus pharetra ultricies. Nullam maximus sem in dolor sodales, vel sagittis metus bibendum. Sed convallis velit id fermentum lobortis. Fusce massa lorem, semper sit amet nulla nec, dictum ullamcorper orci. Sed eleifend iaculis erat in pretium. Sed convallis lorem a aliquam luctus. Suspendisse potenti. Quisque tristique blandit mollis. Maecenas ut tellus ac ligula congue dignissim. Morbi auctor fringilla erat lacinia dignissim.</p>
</div>

<div class="horoscope">
  <h2><span class="ai aries"></span>Aries</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dignissim justo quis tortor vestibulum malesuada. Mauris aliquet leo magna, vel tincidunt nisi rutrum id. Mauris tempor porttitor dolor, a accumsan lacus pharetra ultricies. Nullam maximus sem in dolor sodales, vel sagittis metus bibendum. Sed convallis velit id fermentum lobortis. Fusce massa lorem, semper sit amet nulla nec, dictum ullamcorper orci. Sed eleifend iaculis erat in pretium. Sed convallis...

CSS

.ai {
    display:inline-block;
    margin-right:10px;
    color:#74347a;
}
.ai.aries:before {
    content:"\2648";
}
.ai.taurus:before {
    content:"\2649";
}
.ai.gemini:before {
    content:"\264A";
}
.ai.cancer:before {
    content:"\264B";
}
.ai.leo:before {
    content:"\264C";
}
.ai.virgo:before {
    content:"\264D";
}
.ai.libra:before {
    content:"\264E";
}
.ai.scorpio:before {
    content:"\264F";
}
.ai.sagittarius:before {
    content:"\2650";
}
.ai.capricorn:before {
    content:"\2651";
}
.ai.aquarius:before {
    content:"\2652";
}
.ai.pisces:before {
    content:"\2653";
}