[nobr]

[class=tag]
    display: inline;
    padding: 0px 4px 2px 4px;
    margin-top: 10px;
    background: #ddb6c6;
    color: #fff;
[/class]


[class=tab]
    box-sizing: border-box;
    margin-top: 10px;
    display: inline-block;
    border-radius: 10px;
    border: 2px solid #fff;
    padding: 15px;
    background: #fff;
    color: #ddb6c6;
    text-align: center;
    transition: 0.5s;
    font-family: Avenir;
    font-size: 12px;
    cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important;
[/class]


[class=selectedTab]
    box-sizing: border-box;
    margin-top: 10px;
    padding: 15px;
    border-radius: 10px;
    border: 2px solid #fff;
    background: #ddb6c6;
    color: #fff;
    text-align: center;
    transition: 0.5s;
    font-family: Avenir;
    font-size: 12px;
    cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important;
[/class]


[class name=tab state=hover]
    border: 2px solid #ddb6c6;
    transition: 0.5s;
    cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important;
[/class]


[class name=selectedTab state=hover]
    border: 2px solid #fff;
    transition: 0.5s;
    cursor: url(https://66.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_ol4nwisGdu1uxxza6_75sq.png), auto!important;
[/class]


[class=tabContents]
    position: absolute;
    opacity: 0;
    transition: all .5s;
    width: 380px;
    background: #fff;
    color: #000;
    height: 300px;
    box-sizing: border-box;
[/class]


[class=show]
    opacity: 1;
    z-index: 1;
[/class]


[script class=tab1 on=click]
    addClass show tabContents1
    removeClass show tabContents2
    removeClass show tabContents3
    removeClass show tabContents4

    addClass selectedTab tab1
    removeClass selectedTab tab2
    removeClass selectedTab tab3
    removeClass selectedTab tab4
[/script]


[script class=tab2 on=click]
    addClass show tabContents2
    removeClass show tabContents1
    removeClass show tabContents3
    removeClass show tabContents4

    addClass selectedTab tab2
    removeClass selectedTab tab1
    removeClass selectedTab tab3
    removeClass selectedTab tab4
[/script]


[script class=tab3 on=click]
    addClass show tabContents3
    removeClass show tabContents2
    removeClass show tabContents1
    removeClass show tabContents4

    addClass selectedTab tab3
    removeClass selectedTab tab2
    removeClass selectedTab tab1
    removeClass selectedTab tab4
[/script]


[script class=tab4 on=click]
    addClass show tabContents4
    removeClass show tabContents2
    removeClass show tabContents1
    removeClass show tabContents3

    addClass selectedTab tab4
    removeClass selectedTab tab2
    removeClass selectedTab tab1
    removeClass selectedTab tab3
[/script]

[div=margin: auto; width: 700px; background: #e6e6e6; border-radius: 15px; box-sizing: border-box;]
[div=display: flex; flex-direction: row;]

[div=flex: 1; background: url(https://scontent-lhr3-1.cdninstagram.com/vp/90e5cc8bc68533993d1f46d0d6c440bb/5E086876/t51.2885-15/e35/59739462_554657665059934_2600813418876405871_n.jpg?_nc_ht=scontent-lhr3-1.cdninstagram.com&ig_cache_key=MjA0MTY1OTUwOTE1Njg0OTcyOA%3D%3D.2); background-size: cover; background-position: 50% 50%; border-right: 4px solid #fff; border-radius: 15px 0px 0px 15px;]


[div=box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-evenly; margin: auto; width: 25%; margin-right: -25px; margin-top: 100px;]
[div class="tab tab1"]01[/div]
[div class="tab tab2"]02[/div]
[div class="tab tab3"]03[/div]
[/div]
[/div]


[div=flex: 2; margin-left: 10px; padding: 30px; box-sizing: border-box;][div=height: 340px; border-radius: 15px; box-sizing: border-box; padding: 20px; background: #fff;]


[div class="tabContents tabContents4 show"]
[div=font-family: Lobster; color: #ddb6c6; text-align: center; font-size: 60px; padding-top: 80px;]olive brooks[/div]
[div=font-family: Avenir; color: #000; text-align: center; text-transform: uppercase; font-size: 10px; margin-top: -15px; letter-spacing: 3px;]"some quote maybe."[/div]
[/div]


[div class="tabContents tabContents1"]
[div=height: 300px; overflow-y: auto; font-size: 11px; overflow-y: auto; color: #000; text-align: justify; line-height: 25px;]
[div class=tag]name.[/div] info.
[br][/br]
[div class=tag]age.[/div] info.
[br][/br]
[div class=tag]d.o.b.[/div] info.
[br][/br]
[div class=tag]gender.[/div] info.
[br][/br]
[div class=tag]sexuality.[/div] info.
[/div]
[/div]


[div class="tabContents tabContents2"]
[div=height: 300px; overflow-y: auto; font-size: 11px; overflow-y: auto; color: #000; text-align: justify; line-height: 25px;]
[div class=tag]height.[/div] info.
[br][/br]
[div class=tag]weight.[/div] info.
[br][/br]
[div class=tag]appearance.[/div] info.
[br][/br]
[div class=tag]features.[/div] info.
[br][/br]
[div class=tag]ailments.[/div] info.
[/div]
[/div]


[div class="tabContents tabContents3"]
[div=height: 300px; overflow-y: auto; font-size: 11px; overflow-y: auto; color: #000; text-align: justify; line-height: 25px;]
[div class=tag]persona.[/div] info.
[br][/br]
[div class=tag]likes.[/div] info.
[br][/br]
[div class=tag]dislikes.[/div] info.
[br][/br]
[div class=tag]history.[/div] info.
[br][/br]
[div class=tag]misc.[/div] info.
[/div]
[/div]

[/div][/div]

[/div]
[/div]
[div=font-size: 8px; margin-top: 5px; text-align: center;]coded by luna.[/div]
[/nobr]