JSFiddle - React, Tailwind, and code Playground

HTML

<div class="frivilligBox">
    <a href="/frivillig/">
        <h2>Bliv frivillig</h2>
            <p>Er du interesseret?</p>
    </a>
</div>

CSS

.frivilligBox {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	
    font-weight: bold;
	font-size: 21px;
	float: right;
	width: 215px;
    text-align: center;
    padding: 10px 5px;
	margin: 0px 0px 15px;
   	background: #a90329; /* Old browsers */
	background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* IE10+ */
	background: linear-gradient(to bottom, #a90329 0%,#8f0222 44%,#6d0019 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
}
.frivilligBox p {
	font-size: 13px;
}
.frivilligBox a {
	text-decoration: none;
	color: #ff9900;
	-moz-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
}
.frivilligBox a:hover {
	color: #fff;
	text-decoration: none;
}

JavaScript

(function(jQuery){
     jQuery.extend(jQuery.support, {
         "rgba": supportsRGBA()
     });
 
     // We override the animation for all of these color styles
     jQuery.each(['backgroundColor', 'borderBottomColor', 'borderLeftColor', 'borderRightColor', 'borderTopColor', 'color', 'outlineColor'], function(i,attr){
         jQuery.fx.step[attr] = function(fx){
             var tuples = [];
             if ( !fx.colorInit ) {
                 fx.start = getColor( fx.elem, attr );
                 fx.end = getRGB( fx.end );
                 fx.alphavalue = {
                     start: 4 === fx.start.length,
                     end:   4 === fx.end.length
                 };
                 if ( !fx.alphavalue.start ) {
                     fx.start.push( 1 );
                 }
                 if ( !fx.alphavalue.end ) {
                     fx.end.push( 1 );
                 }
                 if ( jQuery.support.rgba &&
                      (!fx.alphavalue.start && fx.alphavalue.end) || // RGB => RGBA
                      (fx.alphavalue.start && fx.alphavalue.end)  || // RGBA => RGBA
                      (fx.alphavalue.start && !fx.alphavalue.end)    // RGBA => RGB
                 ) {
                     fx.colorModel = 'rgba';
                 } else {
                     fx.colorModel = 'rgb';
                 }
                 fx.colorInit = true;
             }
 
             tuples.push( Math.max(Math.min( parseInt( (fx.pos * (fx.end[0] - fx.start[0])) + fx.start[0]), 255), 0) ); // R
             tuples.push( Math.max(Math.min( parseInt( (fx.pos * (fx.end[1] - fx.start[1])) + fx.start[1]), 255), 0) ); // G
             tuples.push( Math.max(Math.min( parseInt( (fx.pos * (fx.end[2] - fx.start[2])) + fx.start[2]), 255), 0) ); // B
 
             if ( fx.colorModel == 'rgba' ) {
                 // Alpha
                 tuples.push( Math.max(Math.min( parseFloat((fx.pos * (fx.end[3] - fx.start[3])) + fx.start[3]), 1), 0).toFixed(2) );
         ...