JSFiddle - React, Tailwind, and code Playground

by scottJinXiang

HTML

<!DOCTYPE html>
<html>
  
  
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JinXiang</title>
</head>
  
<body>
  

  <div class="circle">
      <p class="name">Jin Xiang</p>
  </div>

  <div class="intro">
    <p>Birthday: 1997/03/15</p>
    <p>Horoscopes: Pisces</p>
    <p>Hobby: workout</p>
  </div>

</body>
</html>

CSS

body{
  background:#E6E6FA; 
  background :url(https://i.imgur.com/EcnORtt.jpg);
  background-size:contain;
  background-repeat: no-repeat;
  opacity:1;
}

p.name{
  text-align:center;  
  font-variant: small-caps;
  font-size:25px;
  margin:10px auto;
  width:300px;
  height:40px;
  line-height:40px;
  opacity:0.6;//透明
}

div.circle{
    width:400px;
    height:400px;
    border-radius:999em;
    background-color:white;
    margin:10px auto;
    margin-left:center;
    background :url(https://i.imgur.com/pGa95SC.jpg);
    background-size:cover;
    background-position:0px;
}

div.intro{
  width:450px;
  background-color:white;
  border:1px dotted;
  margin:0px auto;
  text-align:center;
  font-size:20px;
  font-weight:bold;
  float:top;
}