JSFiddle - React, Tailwind, and code Playground

by Omar X

HTML

<div data-role="page">
 <div data-role="header" data-id="pagetabs"  data-position="fixed"> <!-- MyActivity Header-->
    <div data-role="navbar" data-iconpos="left">
        <ul>
          <li><a href="fb_feed.html" data-prefetch="true" rel="external" data-icon="fbicon"> Facebook</a></li>
          <li><a href="youtube_feed.html" data-prefetch="true" rel="external" data-icon="yticon">YouTube</a></li>
          <li><a href="my_activity.html" id="my_activitypage" data-prefetch="true" data-icon="maicon" class="ui-btn-active ui-state-persist">My Activity</a></li>
        </ul>
    </div>
  </div> <!-- MyActivity Header End -->
  <div data-role="content">
   </div> <!-- MyActivity Content End -->
   <div data-role="footer" data-theme="a" data-position="fixed"><h5>Social Stream</h5></div> <!-- MyActivity Footer -->
  </div> <!--End of page -->

CSS

.custom-navbar {
    background: rgb(255, 26, 0);
    /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;
    base64, PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZmYxYTAwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmMWEwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
    background: -moz-linear-gradient(-45deg, rgba(255, 26, 0, 1) 0%, rgba(255, 26, 0, 1) 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, rgba(255, 26, 0, 1)), color-stop(100%, rgba(255, 26, 0, 1)));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(-45deg, rgba(255, 26, 0, 1) 0%, rgba(255, 26, 0, 1) 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-45deg, rgba(255, 26, 0, 1) 0%, rgba(255, 26, 0, 1) 100%);
    background: -ms-linear-gradient(-45deg, rgba(255, 26, 0, 1) 0%, rgba(255, 26, 0, 1) 100%);
    background: linear-gradient(135deg, rgba(255, 26, 0, 1) 0%, rgba(255, 26, 0, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff1a00', endColorstr='#ff1a00', GradientType=1);

}

JavaScript

$('.ui-navbar a').addClass('custom-navbar');