<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div id="blogNavigation"> <div class="responsive-navigation" data-reactid=".0"> <div class="blog-desktop-navigation" data-reactid=".0.1"> <div class="blog-desktop-navigation-inner" data-reactid=".0.1.0"> <a href="https://media.netflix.com/en/releases-and-blogs" class="navItem" data-reactid=".0.1.0.$0"> <p data-reactid=".0.1.0.$0.0" style="font-size: 16px;">All</p> <img src="https://media.netflix.com/dist/img/active_arrow.svg" data-reactid=".0.1.0.$0.1"></a> <a href="https://media.netflix.com/en/press-releases" class="navItem" data-reactid=".0.1.0.$1"> <p data-reactid=".0.1.0.$1.0" style="font-size: 16px;">Press Releases</p> <img src="https://media.netflix.com/dist/img/active_arrow.svg" data-reactid=".0.1.0.$1.1"></a> <a href="https://media.netflix.com/en/company-blog" class="navItem active" data-reactid=".0.1.0.$2"> <p data-reactid=".0.1.0.$2.0" style="font-size: 16px;">Company Blog</p> <img src="https://media.netflix.com/dist/img/active_arrow.svg" data-reactid=".0.1.0.$2.1"></a> <a href="http://techblog.netflix.com" class="navItem" data-reactid=".0.1.0.$3"> <p data-reactid=".0.1.0.$3.0" style="font-size: 16px;">Tech Blog</p> <img src="https://media.netflix.com/dist/img/active_arrow.svg" data-reactid=".0.1.0.$3.1"></a></div></div></div></div>

body * {word-wrap: break-word;} *, ::before, ::after {box-sizing:border-box;} .blog-desktop-navigation .blog-desktop-navigation-inner {display:flex;} .blog-desktop-navigation a {display: inline-block;width: 25%;background: #f5f5f1;border: 1px solid #c6c6c6;text-align: center;position: relative;padding: 2.5em 1em;cursor: pointer;color: rgba(34,31,31,0.4);transition: all 75ms linear;text-decoration: none;} .blog-desktop-navigation a p {font-size: 1.75em;text-transform: uppercase;margin: 0;color: rgba(34,31,31,0.4);transition: all 75ms linear;text-rendering: optimizeLegibility;} p {font-size: 1.5em;line-height: 1.55;color: #221f1f;font-family: 'Gotham A', 'Gotham B', "Helvetica Neue", Helvetica, Arial, sans-serif;font-weight: 400;font-style: normal;} .blog-desktop-navigation a img {display: none;} img {border: 0;} .blog-desktop-navigation a.active {background: #e50914;border: 1px solid #e50914;} .blog-desktop-navigation a.active p {color: #fff;} .blog-desktop-navigation a.active img {position: absolute;left: 0;bottom: -1em;right: 0;width: 3em;display: inline-block;margin: 0 auto;} .blog-desktop-navigation a:hover {background:#fff;color:#221f1f;} .blog-desktop-navigation a.active:hover {background: #e50914;} .blog-desktop-navigation a:hover p {color: #221f1f;}