JSFiddle - React, Tailwind, and code Playground

by netsi1964

HTML

<link rel="stylesheet" href="http://bootswatch.com/cyborg/bootstrap.min.css">
<section class="container">
    <h1>Highlighting elements using <code>:target</h1>
        <p class="span8">This HTML/CSS3 prototype shows example of using the css <code>:target</code> to do something with the element which is the current target.</p>
</section>
<section class="container">
    <div class="navbar navbar-inverse">
        <div class="navbar-inner">
        <div class="nav-collapse">
            <a class="brand">3 great tips</a>
            <ul class="nav">
                <li>
                    <a href="#one">Use jsfiddle.net</a>
                </li>
                <li>
                    <a href="#two">Versioning</a>
                </li>
                <li>
                    <a href="#three">Sharing</a>
                </li>
            </ul>
        </div>
    </div>
    </div>
</section>
<section class="target">
    <div id="one">
        <h2>Use jsfiddle.net</h2>
        <p>Create a user on jsfiddle.net. If you need a quick prototyping tool jsfiddle.net is a great start</p>
    </div>
    <div id="two">
        <h2>Versioning</h2>
        <p>You can code safely as jsfiddle.net offers versioning of your code</p>
    </div>
    <div id="three">
        <h2>Sharing</h2>
        <p>You can easyli share your prototypes by link or by embed</p>
    </div>
</section>

CSS

section.target div {
counter-increment: tip;  
}
:target {
  -webkit-transform: translateX(20px); 
  -moz-transform: translateX(20px); 
  -ms-transform: translateX(20px); 
  -o-transform: translateX(20px);
  border-left-color: green; 
  
}
:target::before {
content: counter(tip);
    -webkit-transform: rotate(-270deg); 


    position: absolute;
    left: -1.4em;
    top: 0em;
    color: white;
    font-size: 2.7em;
    background: rgba(255,255,255,.4);
    border-radius: 49%;
    padding: .4em;
}
@-webkit-keyframes highlight {
  0% { border-left-color: red; }
  100% { border-left-color: green; }
}
@-moz-keyframes highlight {
  0% { border-left-color: red; }
  100% { border-left-color: green; }
}   
section.target > div {
  border-left: 40px solid red;
  padding: 10px;
  -webkit-transition: all 0.5s ease; 
  -moz-transition: all 0.5s ease; 
  -ms-transition: all 0.5s ease; 
  -o-transition: all 0.5s ease;     
  padding-right: 50px;
  margin-left: -20px;    
}

section.target div:target {
border-left-color: green !Important;
}

/* fixes for styled code from bootstrap */
body>code {background-color: transparent; border-color: transparent;}
.nav li a:active {background-color: green;}