JSFiddle - React, Tailwind, and code Playground

HTML

<div class="more-videos"><a href=""><span class="text">More videos</span><span class="corner"></span></a></div>

CSS

.more-videos {
        padding: 20px;
    }

        .more-videos a {
            text-decoration: none;
            background-color: #7f7f7f;
            position: relative;
            padding: 10px 10px 5px 15px;
        }

            .more-videos a span {
                font-size: 20px;
                color: #ffffff;
            }

                .more-videos a span.text {
                    padding-right: 10px;
                }

                .more-videos a span.corner {
                    border-top: 15px solid #7f7f7f;
                    border-right: 15px solid #fff;
                    border-bottom: none;
                    border-left: none;
                    bottom: 0px;
                    right: 0px;
                    position: absolute;
                }

            .more-videos a:hover span.corner {
                border-right: 15px solid #fff;
            }