JSFiddle - React, Tailwind, and code Playground

HTML

<p style='font-weight:200'>font-weight:200</p>
<p style='font-weight:300'>font-weight:300</p>
<p style='font-weight:400'>font-weight:400</p>
<p style='font-weight:600'>font-weight:600</p> 
<p style='font-weight:700'>font-weight:700</p>

CSS

@font-face {
    font-family: "Segoe UI";
    font-weight: 200;
    src: local("Segoe UI Light");
}
@font-face {
    font-family: "Segoe UI";
    font-weight: 300;
    src: local("Segoe UI Semilight");
}
@font-face {
    font-family: "Segoe UI";
    font-weight: 400;
    src: local("Segoe UI");
}
@font-face {
    font-family: "Segoe UI";
    font-weight: 600;
    src: local("Segoe UI Semibold");
}
@font-face {
    font-family: "Segoe UI";
    font-weight: 700;
    src: local("Segoe UI Bold");
}
@font-face {
    font-family: "Segoe UI";
    font-style: italic;
    font-weight: 400;
    src: local("Segoe UI Italic");
}
@font-face {
    font-family: "Segoe UI";
    font-style: italic;
    font-weight: 700;
    src: local("Segoe UI Bold Italic");
}

BODY {
 font-family: 'Segoe UI';    
}