JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Wellcome to Kas-ved</title>
    <!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <meta name="description" content="" />
    <meta name="author" content="Selen" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="shortcut icon" href="favicon.ico" />
    <link rel="apple-touch-icon" href="apple-touch-icon.png" />
    <link rel="stylesheet" type="text/css" href="reset.css" media="screen, projection" />
    <link rel="stylesheet" type="text/css" href="style.css" media="screen, projection" />

</head>
<body>

    <div id="wrapper" class="shadow">
.

Если ты делаешь ссылку блочным элементом. То она, приобретает свойства блочного элемента.
В частности, ширина блочного элемента равна ширине его родителя. Это момент стоит учитывать. Иначе, при наведении на пустое место, рядом со ссылкой. Курсор будет реагировать формой пальца, как при наведении на ссылку. И переходить по ней.
Тогда лучше воспользоваться display: block + float: right. В данном решении есть небольшой нюанс.

Если ты делаешь ссылку блочным элементом. То она, приобретает свойства блочного элемента.
В частности, ширина блочного элемента равна ширине его родителя. Это момент стоит учитывать. Иначе, при наведении на пустое место, рядом со ссылкой. Курсор будет реагировать формой пальца, как при наведении на ссылку. И переходить по ней.
Тогда лучше воспользоваться display: block + float: right. В данном решении есть небольшой нюанс.

Если ты делаешь ссылку блочным элементом. То она, приобретает свойства блочного элемента.
В частности, ширина блочного элемента равна ширине его родителя. Это момент стоит учитывать. Иначе, при наведении на пустое место, рядом со ссылкой. Курсор будет реагировать формой пальца, как при наведении на ссылку. И переходить по ней.
Тогда лучше воспользоваться display: block + float: right. В...

CSS

/* --------------- reset.css --------------- */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;    /* обнуляем отступы и убираем бордюры */
    vertical-align: baseline;    /* приводим все к одной базовой линии */
    background: transparent;    /* чтобы не проскакивали левые фоны, установленные по умолчанию */
    font-size: 100%;    /* размер шрифта всем одинаковый */
}
article, aside, details, figcaption, figure,
footer, header, hgroup, nav, section { 
    display: block;
}
ol, ul {
    list-style: none;    /* убираем маркеры ненумерованных списков */
}
a {    /* ссылка не в общем списке чтобы не сбрасывать outline по умолчанию */
    margin: 0;
    padding: 0; 
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
table {    /* устраняем отступы между ячейками таблицы */
    border-collapse: collapse; 
    border-spacing: 0;
}
td, td img {
    vertical-align: top;    /* возвращаем привычное вертикальное выравнивание */
}
input, select, button, textarea {
    margin: 0;    /* убираем отступы по умолчанию для элементов форм (в частности для checkbox и radio) */
    font-size: 100%;    /* делаем размер шрифтов везде одинаковым */
    outline: none; /* убираем рамку вокруг рамок в фокусе */
}
hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}
input, select {
    vertical-align: middle;
}
blockquote, q {
    quotes: none;
}
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}
mark {
    background-color:#ff9;
  ...