JSFiddle - React, Tailwind, and code Playground

by JamesKyle

HTML

<article>
    <h1>Try Selecting some text: </h1>
    
    <h2 class="nope">
        Discovery: 
        <code>#A {color: rgba(0,0,0,0.85)}</code>
        <code>#A::selection {color: white; background: rgba(0,0,0,0.85)}</code>
    </h2>
    
    <section id="A">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis posuere justo vitae turpis euismod malesuada. In ac tellus vitae orci fringilla tincidunt id eu lorem. Aliquam nulla augue, laoreet vitae congue sit amet, cursus nec ligula. Pellentesque sodales tristique velit in dignissim. Suspendisse potenti. Quisque malesuada, ipsum ut mollis aliquet, justo lectus pharetra ipsum, nec ornare leo erat nec nisi. Phasellus rhoncus, turpis eu laoreet sollicitudin, quam arcu luctus diam, vel congue nulla lectus sit amet leo.
    </section>
    
    <h2 class="nope">
        Different alpha value
        <code>#B {color: rgba(0,0,0,0.4)}</code>
        <code>#B::selection {color: white; background: rgba(0,0,0,0.4)}</code>
    </h2>
    <section id="B">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis posuere justo vitae turpis euismod malesuada. In ac tellus vitae orci fringilla tincidunt id eu lorem. Aliquam nulla augue, laoreet vitae congue sit amet, cursus nec ligula. Pellentesque sodales tristique velit in dignissim. Suspendisse potenti. Quisque malesuada, ipsum ut mollis aliquet, justo lectus pharetra ipsum, nec ornare leo erat nec nisi. Phasellus rhoncus, turpis eu laoreet sollicitudin, quam arcu luctus diam, vel congue nulla lectus sit amet leo.
    </section>
    
    <h2  class="nope">
        Selection color blue
        <code>#C {color: rgba(0,0,0,0.85)}</code>
        <code>#C::selection {color: blue; background: rgba(0,0,0,0.85)}</code>
    </h2>
    
    <section id="C">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis posuere justo vitae turpis euismod malesuada. In ac tellus vitae orci fringilla tincidunt id eu lorem. Aliquam nulla augue, laoreet vitae congue...

CSS

html {font-size: 100%; overflow: scroll;overflow-x: hidden; *overflow: scroll}
body {font: 1em/1.4em "Helvetica Neue", Helvetica, Arial, sans-serif; padding: 3em 1em; max-width: 800px; width: 80%; margin: 0 auto}
h1, h2 {margin-bottom: 0.4em}
h1 {font-size: 2em; line-height: 1.4em}
h2 {font-size: 1.2em}
section {margin-bottom: 1em; padding: 1em; background: #FAFAFA}
code {display: block; overflow: hidden}
.nope {color: red}
.yup  {color: green}

section.invert {background: #252525}

#A {color: rgba(0,0,0,0.85)}
#A::selection {background: rgba(0,0,0,0.85); color: white}

#B {color: rgba(0,0,0,0.4)}
#B::selection {background: rgba(0,0,0,0.4); color: white}

#C {color: rgba(0,0,0,0.4)}
#C::selection {background: rgba(0,0,0,0.4); color: blue}

#D {color: #252525}
#D::selection {background: #252525; color: white}

#E {color: gray}
#E::selection {background: gray; color: white}

#F {color: hsl(0, 0%, 15%)}
#F::selection {background: hsl(0, 0%, 15%); color: white}

#G {color: hsla(0, 0%, 0%, 85%)}
#G::selection {background: hsla(0, 0%, 0%, 85%); color: white}

#H {color: rgb(15, 15, 15)}
#H::selection {background: rgb(15, 15, 15); color: white}


#I {color: rgba(255,255,255,0.85)}
#I::selection {background: rgba(255,255,255,0.85); color: black}

#J {color: rgba(255,255,255,0.65)}
#J::selection {background: rgba(255,255,255,0.65); color: black}

#K {color: rgba(255,255,255,0.85)}
#K::selection {background: rgba(255,255,255,0.85); color: blue}

#L {color: rgba(77,77,77,0.85)}
#L::selection {background: rgba(77,77,77,0.85); color: black}