JSFiddle - React, Tailwind, and code Playground

by core972

HTML

<h2 class="wp-block-heading" id="les-ressources-utiles-pour-ameliorer-vos-performances-commerciales">Les ressources utiles pour améliorer vos 
  <mark style="background-color:#3A3AA0" class="has-inline-color has-white-color"> performances</mark>
  <span style="white-space: nowrap;">
    <mark style="background-color:#3A3AA0" class="has-inline-color has-white-color"> commerciales</mark>
    <img alt="" decoding="async" class="wp-image-1122" style="width: px" src="https://okalys.preprod-kalelia.fr/wp-content/uploads/2024/12/picto_perf.svg">
  </span>
</h2>

CSS

h2 {

  font-size: 2.5rem;
  /*font-size: clamp(1.625rem, .725rem + 2vw, 2.625rem);*/
  line-height: calc(clamp(1rem, .725rem + 2vw, 2.625rem) + 1.125rem);
  font-family: sans-serif;
}
h2 > mark, span > mark {
  display: inline-block;
  border-radius: 60px;
}
mark:has(+span) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
span > mark {
  margin-left: -1rem;
  padding-left: 0.25rem !important;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.has-white-color {
  color: #FFFFFF !important;
}
h2 > mark, h2 > span > mark {
  padding: 0 clamp(.625rem,0rem + 1.25vw,1.25rem);
}
h2 > span > mark + img[src$=".svg"] {
  vertical-align: top;
  width: calc(clamp(1.25rem,.725rem + 2vw,2.625rem) + 1.125rem) !important;
}