Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /* CSS PART */
- .tags-container {
- width:540px;
- box-sizing:border-box;
- }
- .tags-row {
- display:flex;
- align-items: baseline;
- justify-content: space-evenly;
- flex-wrap: wrap;
- padding: 4px;
- }
- /* MAIN TITLES */
- .title {
- padding: 2px;
- text-align:center;
- text-transform:uppercase;
- }
- /* EACH BOX TAGS */
- .tags {
- width:120px; /* change width and height for the size of each tag box */
- height:200px;
- margin:15px 5px;
- /* delete both overflow if you don't want scroll */
- overflow-y:scroll;
- overflow-x:hidden;
- }
- .list-item {
- padding: 6px;
- }
- .list-item ul {
- text-align:center;
- padding: 0;
- margin: 0;
- }
- .list-item ul li {
- list-style:none;
- }
- .list-item li {
- padding:2px 0;
- margin:5px 0;
- }
- /* GROUP TAGS 1 */
- .tags-item1 {
- border: 1px solid red;
- }
- .title1 {
- color: white;
- background-color: red;
- }
- /* GROUP TAGS 2 */
- .tags-item2 {
- border: 1px solid yellow;
- }
- .title2 {
- color: black;
- background-color: yellow;
- }
- /* GROUP TAGS 3 */
- .tags-item3 {
- border: 1px solid blue;
- }
- .title3 {
- color: white;
- background-color: blue;
- }
- /* GROUP TAGS 4 */
- .tags-item4 {
- border: 1px solid green;
- }
- .title4 {
- color: white;
- background-color: green;
- }
- /* GROUP TAGS 5 */
- .tags-item5 {
- border: 1px solid purple;
- }
- .title5 {
- color: white;
- background-color: purple;
- }
- /* GROUP TAGS 6 */
- .tags-item6 {
- border: 1px solid orange;
- }
- .title6 {
- color: white;
- background-color: orange;
- }
- <!-- > HTML PART <-->
- <div class="tags-container">
- <div class="tags-row">
- <!-- > GROUP TAGS 1 <-->
- <div class="tags tags-item1">
- <div class="title title1">
- group one
- </div>
- <div class="list-item">
- <ul>
- <li>tag</li>
- <li>tag</li>
- <li>tag</li>
- </ul>
- </div>
- </div>
- <!-- > GROUP TAGS 2 <-->
- <div class="tags tags-item2">
- <div class="title title2">
- group two
- </div>
- <div class="list-item">
- <ul>
- <li>tag</li>
- <li>tag</li>
- <li>tag</li>
- <li>tag</li>
- <li>tag</li>
- <li>tag</li>
- <li>tag</li>
- <li>tag</li>
- <li>tag</li>
- <li>tag</li>
- <li>tag</li>
- </ul>
- </div>
- </div>
- <!-- > GROUP TAGS 3 <-->
- <div class="tags tags-item3">
- <div class="title title3">
- group three
- </div>
- <div class="list-item">
- <ul>
- <li>tag</li>
- <li>tag</li>
- <li>tag</li>
- </ul>
- </div>
- </div>
- <!-- > GROUP TAGS 4 <-->
- <div class="tags tags-item4">
- <div class="title title4">
- group four
- </div>
- <div class="list-item">
- <ul>
- <li>tag</li>
- <li>tag</li>
- <li>tag</li>
- <li>tag</li>
- <li>tag</li>
- </ul>
- </div>
- </div>
- <!-- > GROUP TAGS 5 <-->
- <div class="tags tags-item5">
- <div class="title title5">
- group five
- </div>
- <div class="list-item">
- <ul>
- <li>tag</li>
- <li>tag</li>
- <li>tag</li>
- <li>tag</li>
- <li>tag</li>
- </ul>
- </div>
- </div>
- <!-- > GROUP TAGS 6 <-->
- <div class="tags tags-item6">
- <div class="title title6">
- group six
- </div>
- <div class="list-item">
- <ul>
- <li>tag</li>
- <li>tag</li>
- <li>tag</li>
- </ul>
- </div>
- </div>
- </div> <!-- > don't delete/touch <-->
- </div> <!-- > don't delete/touch <-->
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement