<div class="timeline_container"> <div class="timeline_title"></div> <div class="timeline_content"></div> </div> <style> .timeline_container { display: flex; flex-direction: column; align-items: center; padding: 24px 10px; gap: 30px; position: relative; border: 1px solid #ACB5BD; border-radius: 12px; background: #fff; overflow: auto; } .timeline_title { font-style: normal; font-weight: 700; font-size: 16px; line-height: 18px; text-align: center; color: #212429; } .timeline_content { display: flex; gap: 198px; height: 32px; } .timeline_step { position: relative; display: flex; justify-content: center; align-items: center; } .timeline_step_circle { position: absolute; width: 24px; height: 24px; background: #B4B4B4; border: 4px solid #B4B4B4; border-radius: 50%; cursor: pointer; z-index: 2; } .timeline_step_line { position: absolute; height: 2px; width: 198px; background: #B4B4B4; } .timeline_step.finished .timeline_step_circle { background: #FF8C1C; border: 4px solid #FF8C1C; } .timeline_step.active .timeline_step_circle { background: #FFFFFF; border: 4px solid #FF8C1C; } .timeline_step.finished .timeline_step_line, .timeline_step.active .timeline_step_line { background: #FF8C1C; } .timeline_step.first .timeline_step_line { width: 99px; transform: translate(49px, 0); } .timeline_step.last .timeline_step_line { width: 99px; transform: translate(-50px, 0); } .timeline_message { position: absolute; background: #495057; border-radius: 8px; z-index: 1000; padding: 16px 19px; display: flex; flex-direction: column; justify-content: space-between; } .timeline_message_button_close { background: #FF8C1C; border-radius: 8px; width: 115px; height: 29px; border: none; color: #fff; cursor: pointer; font-weight: 500; font-size: 14px; margin-top: 17px; transition: .3s; } .timeline_message_button_close:hover { opacity: 0.9; } .timeline_message_item { color: #F5F5F6; font-weight: 500; font-size: 14px; line-height: 18px; display: flex; gap: 5px; max-width: 400px; } .timeline_message_item .timeline_message_item_value { font-weight: 600; } .timeline_message::before { content: ''; disply: block; width: 24px; height: 24px; background: #495057; position: absolute; top: -12px; left: 36px; transform: rotate(45deg); } </style>