JSFiddle - React, Tailwind, and code Playground

by Ali Uygur

HTML

<div id="customizeButtonContainer" class="aaa"><cr-button id="customizeButton" title="Bu sayfayı özelleştir" aria-pressed="false" role="button" tabindex="0" aria-disabled="false" data-native-id="NewTabPageUI::kCustomizeChromeButtonElementId" has-prefix-icon_=""><div id="customizeIcon" slot="prefix-icon"></div>
<div id="customizeText">
            Chrome'u özelleştir
          </div></cr-button></div>

CSS

#customizeButtonContainer {
    background-color: #d3e3fd;
    border-radius: 20px;
    bottom: 16px;
    position: fixed;
}

#customizeButton {
    background-color: #1f1f1f0f;
    color:#a8c7fa
    border: none;
    border-radius: 10px;
    box-shadow: 0 3px 6px rgba(0,0,0,.16), 0 1px 2px rgba(0,0,0,.23);
    font-weight: 400;
    min-width: 32px;
    padding-inline-start: 16px;
    padding-inline-end: 16px;
}
#customizeButton {
    background-color: #1f1f1f0f;
    color: #041e49;
    border: none;
    border-radius: 20px;
    box-shadow: 0 3px 6px rgba(0,0,0,.16), 0 1px 2px rgba(0,0,0,.23);
    font-weight: 400;
    min-width: 32px;
    padding-inline-start: 16px;
    padding-inline-end: 16px;
}
.aaa{
        background-color: #1f1f1f0f;
    color: #041e49;
    -webkit-tap-highlight-color: transparent;
    align-items: center;
    border: 1px solid #041e49;
    border-radius: 4px;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-flex;
    flex-shrink: 0;
    font-weight: 500;
    justify-content: center;
    min-width: 5.14em;
    outline-width: 0;
    overflow: hidden;
    padding: 8px 16px;
    position: relative;
    user-select: none;
}