JSFiddle - React, Tailwind, and code Playground

HTML

<ol style="float:left;border-radius:10px;min-width:30.8%;padding: 0px;text-align: center;background: #fff none repeat scroll 0 0;border: 1px solid #ddd;color: #333;margin: 30px 2px 2px;position: relative;text-shadow: 0 1px rgba(255, 255, 255, 0.8);"><h3 style="border-radius:10px;font-size: 1.3em;font-weight: normal;background-color: #0088cc;color: #fff;margin: -20px -1px 0;padding-left: 0;padding-right: 0;padding-top: 30px;text-shadow: 0 1px #555;">Bronze</h3><h3 style="border-radius: 2px 2px 0 0;font-size: 2.3em;font-weight: normal;background-color: #0088cc;color: #fff;margin: -20px -1px 0;padding-left: 0;padding-right: 0;padding-top: 30px;padding-bottom: 30px;text-shadow: 0 1px #555;">$59</h3><ul style="margin-bottom: -15px;margin-top: 0;list-style: outside none none;padding: 0;"><li style="padding: 12px 0;border-top: 1px solid #ddd;color: #777;"><strong>1</strong> Video</li><li style="padding: 12px 0;border-top: 1px solid #ddd;color: #777;"><strong>20</strong> Picures</li><li style="padding: 12px 0;border-top: 1px solid #ddd;color: #777;"><strong>My</strong> Email</li><li style="padding: 12px 0px;border-top: 1px solid #ddd;color: #777;"><strong>My</strong> Phone</li><li style="padding: 12px 0 30px;border-top: 1px solid #ddd;color: #777;"><font style="text-shadow:none;color:#fff; border-radius: 2px; font-size: 12px; font-weight: 400; letter-spacing: 0px; background: linear-gradient(to bottom, #2989d8 0%,#1e5799 100%); text-transform: none; padding: 7px 9px; margin: 5px 0px;">500 TOKENS</font></li></ul></ol><ol style="float:left;border-radius:10px;min-width:30.8%;padding: 0px;text-align: center;background: #fff none repeat scroll 0 0;border: 1px solid #ddd;color: #333;margin: 30px 2px 2px;position: relative;text-shadow: 0 1px rgba(255, 255, 255, 0.8);"><h3 style="border-radius:10px;font-size: 1.3em;font-weight: normal;background-color: #0088cc;color: #fff;margin: -20px -1px 0;padding-left: 0;padding-right: 0;padding-top: 30px;text-shadow: 0 1px...