JSFiddle - React, Tailwind, and code Playground

HTML

<p class="p1">left<br />글꼴이름과 대표글꼴들을 콤마로 구별하여 복수지정하고 그 순서 그대로 우선순위가 된다. 위 예제에서는 "맑은 고딕"이 우선 표시 되고 "맑은 고딕"이 없으면, verdana 가 표시되고, 그 글꼴이 없으면 시스템 대표글꼴인 san-serif가 표시되도록 지정되었다.</p>
<p class="p2">right<br />글꼴이름과 대표글꼴들을 콤마로 구별하여 복수지정하고 그 순서 그대로 우선순위가 된다. 위 예제에서는 "맑은 고딕"이 우선 표시 되고 "맑은 고딕"이 없으면, verdana 가 표시되고, 그 글꼴이 없으면 시스템 대표글꼴인 san-serif가 표시되도록 지정되었다.</p>
<p class="p3">center<br />글꼴이름과 대표글꼴들을 콤마로 구별하여 복수지정하고 그 순서 그대로 우선순위가 된다. 위 예제에서는 "맑은 고딕"이 우선 표시 되고 "맑은 고딕"이 없으면, verdana 가 표시되고, 그 글꼴이 없으면 시스템 대표글꼴인 san-serif가 표시되도록 지정되었다.</p>
<p class="p4">justify<br />글꼴이름과 대표글꼴들을 콤마로 구별하여 복수지정하고 그 순서 그대로 우선순위가 된다. 위 예제에서는 "맑은 고딕"이 우선 표시 되고 "맑은 고딕"이 없으면, verdana 가 표시되고, 그 글꼴이 없으면 시스템 대표글꼴인 san-serif가 표시되도록 지정되었다.</p>

CSS

p {
    background-color : #eee;
    width: 300px;
    font-size : 0.75em;
}
.p1 {
    text-align: left;
}
.p2 {
    text-align: right;
}
.p3 {
    text-align: center;
}
.p4 {
    text-align: justify;
}