JSFiddle - React, Tailwind, and code Playground
by Ali Khaled
HTML
<div id="hero-slat" class="static midnight-blue-small-white">
<a href="https://www.bluenile.com/build-your-own-ring/settings?elem=image&oid_list=70841%2C+71824&tag=none&track=heromodrn" class="image medium-crop-right" data-elem="image"> <picture> <source media="(min-width: 850px)" data-media="large" srcset="https://bnsec.bluenile.com/bluenile/is/image/bluenile/HPHero_HP-LRG_122618-v2?$MODRN_HP_Hero_lrg$&rgn=100,585,4200,0&hei=400 1x, https://bnsec.bluenile.com/bluenile/is/image/bluenile/HPHero_HP-LRG_122618-v2?$MODRN_HP_Hero_lrg_2x$&rgn=100,585,4200,0&hei=800 2x"> <source media="(min-width: 600px)" data-media="medium" srcset="https://bnsec.bluenile.com/bluenile/is/image/bluenile/HPHero_HP-MED_122618-v3?$MODRN_HP_Hero_med$&rgn=0,525,2350,0&bgc=f6f6f6&hei=350 1x, https://bnsec.bluenile.com/bluenile/is/image/bluenile/HPHero_HP-MED_122618-v3?$MODRN_HP_Hero_med_2x$&rgn=0,525,2350,0&bgc=f6f6f6&hei=700 2x"> <source media="(max-width: 600px)" data-media="small" srcset="https://bnsec.bluenile.com/bluenile/is/image/bluenile/HPHero_HP-SML_122618?$MODRN_HP_Hero_sml$&rgn=0,280,1800,20&bgc=f6f6f6&hei=194 1x, https://bnsec.bluenile.com/bluenile/is/image/bluenile/HPHero_HP-SML_122618?$MODRN_HP_Hero_sml_2x$&rgn=0,281,1800,20&bgc=f6f6f6&hei=388 2x"> <img src="https://bnsec.bluenile.com/bnsecure/ai/pxl.gif" data-small-url="https://bnsec.bluenile.com/bluenile/is/image/bluenile/HPHero_HP-SML_122618?$MODRN_HP_Hero_sml$&rgn=0,280,1800,20&bgc=f6f6f6&hei=194" data-medium-url="https://bnsec.bluenile.com/bluenile/is/image/bluenile/HPHero_HP-MED_122618-v3?$MODRN_HP_Hero_med$&rgn=0,525,2350,0&bgc=f6f6f6&hei=350" data-large-url="https://bnsec.bluenile.com/bluenile/is/image/bluenile/HPHero_HP-LRG_122618-v2?$MODRN_HP_Hero_lrg$&rgn=100,585,4200,0&hei=400" class="medium-crop-right responsive-image" alt="Shop Engagement Rings" title="Shop Engagement Rings"> ...CSS
@charset "UTF-8";[class*="...