JSFiddle - React, Tailwind, and code Playground

by adamschwartz

HTML

<h1>Suggested changes to Chameleon</h1>

<h2>As written</h2>

<pre><code>a[href*="wordpress"] {
    color: #21759b;
}</code></pre>

<div class="as-written">
    <p>
        <a href="http://example.com/why-you-should-use-wordpress">Example: Why you should use Wordpress</a>
        <br/>
        <code>http://example.com/why-you-should-use-wordpress</code>
    </p>
    
    <p>
        <a href="http://wordpress.com">Wordpress.com</a>
        <br/>
        <code>http://wordpress.com</code>
    </p>
</div>

<h2>With change</h2>

<pre><code>a[href*="//wordpress.com"] {
    color: #21759b;
}</code></pre>

<div class="with-change">
    <p>
        <a href="http://example.com/why-you-should-use-wordpress">Example: Why you should use Wordpress</a>
        <br/>
        <code>http://example.com/why-you-should-use-wordpress</code>
    </p>
    
    <p>
        <a href="http://wordpress.com">Wordpress.com</a>
        <br/>
        <code>http://wordpress.com</code>
    </p>
</div>

CSS

.as-written a[href*="wordpress"] {
    color: #21759b;
}

.with-change a[href*="//wordpress.com"] {
    color: #21759b;
}