DEMO

HTML

		<div class="Salary_list">
 <div class="shadow">
  <div class="photo"><img src="https://secure.gravatar.com/avatar/785fcf60698755b75c7aaed0fc37ad50?s=300&d=mm&r=g" width="100%" alt="アイコン"></div>
  <p class="example-name">苗字名前</p>
  <p class="example-title">出勤の日数／時間</p>
  <p class="example-sentence">週0日0時間</p>
  <p class="example-title">平均月収</p>
  <p class="example-Salary">000,000円</p>
 </div>
</div>

		

HTML説明

画像の設定方法
「画像URL（3行目）」を任意のものに書き換えてください。

文字の変更方法
「各<p>~</p>」のテキストを任意のものに書き換えてください。
前後の「」のような記述を消さないようにご注意ください。

給与例を増やす方法
「<div>~</div>(1~10行目)」までのすべてのテキストを複製してください。

CSS

		<style>
.Salary_list{
 max-width: 580px;
 margin: 0 auto;
 padding: 6em 0 2em;
 background: #ffd5d5;
	}
.Salary_list p{
 text-align: center;
 margin: 10px auto;

	}
.shadow{
 padding: 5px;
 background: #FFF;
 box-shadow: 0px 10px 10px rgba(0, 0, 0, .05);
 width: 90%;
 margin: 0 auto;
 border-radius: 20px;
	}
.photo{
 width: 150px;
 height: 150px;
 overflow: hidden;
 border-radius: 100%;
 margin: -5em auto 0;
 border: solid 5px #FFF;
 box-shadow: 0px 10px 10px rgba(0, 0, 0, .05);
}
.example-name {
 font-size: 2em;
 font-weight: bold;
}
.example-title {
 padding: 5px;
 width: 87%;
 background: #ffaeae;
 color: #FFF;
 border-radius: 5px;
 font-size: .9em;
}
.example-Salary {
 font-size: 2em;
 font-weight: bold;
 color: #ff5454;
}
</style>

		

CSS説明

色の変更方法
各色コードを任意のものに書き換えてください。
背景色＝6行目
項目帯＝37行目
金額＝45行目