JSFiddle - React, Tailwind, and code Playground

HTML

<!-- EXAMPLE 1 -->
<p style="margin-left: 350px;">CSS3 Example 1</p>
<p style="margin-left: 270px;">Happy Breadcrumb Arrow NavBar's Demo!</p>

<!-- This will show the jsFiddle Results 1 -->
<div id="results1">Clicked = </div><br />

<!-- This is the Breadcrumb Navigation 1 -->
<div id="breadcrumbNav1">
  <div id="arrowBar1">
    <span id="borderTop1"></span>
                              <!-- This very first span can be considered a unique Crumb0 that is hidden from view because it's white in color. -->
                              <!-- That said, this first span only is used to provide the "Happy" blue arrow with arrow-legs. -->
                              <span class="AB1rotate color0arrowTail">&nbsp;</span>   
      <a href="#Happy">       <span class="AB1rotate color1"><span class="AB1rotateReset"><span class="AB1text1">Happy</span></span></span></a>
      <a href="#Breadcrumb">  <span class="AB1rotate color2"><span class="AB1rotateReset"><span class="AB1text2">Breadcrumb</span></span></span></a>
      <a href="#Arrow">       <span class="AB1rotate color3"><span class="AB1rotateReset"><span class="AB1text3">Arrow</span></span></span></a>
      <a href="#NavBAR's">    <span class="AB1rotate color4"><span class="AB1rotateReset"><span class="AB1text4">NavBAR's</span></span></span></a>
      <a href="#Demo!">       <span class="AB1rotate color5"><span class="AB1rotateReset"><span class="AB1text5">Demo!</span></span></span></a>
    <span id="borderBottom1"></span>
  </div>
</div>

    
    
<br /><br /><br />

    
<!-- EXAMPLE 2 -->
<p style="margin-left: 350px;">CSS3 Example 2</p>
<p style="margin-left: 200px;">Wonderful CSS3 Accessibility Breadcrumb NavBAR's For You!</p>

<!-- This will show the jsFiddle Results 2 -->
<div id="results2">Clicked = </div><br />

<!-- This is the Breadcrumb Navigation 2 -->
<div id="breadcrumbNav2">
  <div id="arrowBar2">
    <!-- Notice the lack of #borderTop2 and #borderBottom2 in this example since border is applied entirely...

CSS

body{margin-top: 25px;}

#results1{
  margin-left: 350px;
}
#breadcrumbNav1{         /* Position breadcrumbNav1 on webpage relative to other objects */
  margin-top: 0px;
  margin-left: 143px;    /* This value was manually tuned so that it can be compared to Example 2 version. */
}
#arrowBar1{
  display: inline-block;
  /*background-color: red; */ /* Enable to view RED on right side of last Crumb to aid in helping find this elements width on the next line. */
  width: 557px;               /* Value 557px is for 5 Crumbs. Method to discover: First use 1000px and then work lower prior to "Demo!" tip clipping. */
  height: 52px;
  overflow: hidden;
}
#borderTop1{
  display: block;
  position: relative;
  width: 530px;
  height: 1px;
  background-color: #000000; /* Pseudo "border-top" for #arrowBar1 is created by setting height and this background color */
  z-index: 100;
}
#borderBottom1{
  display: block;
  position: relative;
  width: 531px;               /* Due to CSS3 Rotate use, this width value is tweaked 1px compared to #borderTop1 width above */
  height: 1px;
  background-color: #000000;  /* Pseudo "border-bottom" for #arrowBar1 is created by setting height and this background color */
  z-index: 100;               /* This value should be higher than z-index of top-most interactive breadcrumb. Example: .color1 = 50 so minimum z-index here is 51. */
  top: -152px;
}

/* This rotate is for Example 1 */
.AB1rotate {
  position: relative;
  display: inline-block;
  top: -76px;
  width: 200px;
  height: 200px;

  /* Cross browser CSS3 Rotate Rules from: CSS3 Please! */
  -webkit-transform: rotate(45deg);  /* Saf3.1+, Chrome */
     -moz-transform: rotate(45deg);  /* FF3.5+ */
      -ms-transform: rotate(45deg);  /* IE9 */
       -o-transform: rotate(45deg);  /* Opera 10.5 */
          transform: rotate(45deg);
}

/* This rotate reset for inner content is for Example 1 */
.AB1rotateReset {
  display: inline-block;
  
  /* Cross browser CSS3 Rotate Rules from: CSS3...

JavaScript

// This will show the jsFiddle Results when **any** part of hover arrow is clicked.
$(document).ready(function() {

    $('#arrowBar1 a').click(function() {

        $('#results1').html("Clicked = " + $(this).attr('href').slice(1));

    });

    $('#arrowBar2 a').click(function() {

        $('#results2').html("Clicked = " + $(this).attr('href').slice(1));
    });



});