Css\html

CSS

.DHDWDG10005--total-flagged-gripes_firstsq {
  width: 214px;
  height: 219px;
  
}

.Rectangle-secondSq {
  width: 139px;
  height: 139px;
  background-color: #ffffff;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.31);
  padding-left: 15px;
}

.layerFornumber {
  width: 30px;
  height: 62px;
  font-family: PTSans;
  font-size: 48px;
  letter-spacing: 3.7px;
  margin: auto;
  color: #ff4d4d;
}

.Total-Flagged-Gripes_message {
  width: 115px;
  height: 32px;
  font-family: PTSans;
  font-size: 14px;
  line-height: 1.14;
  letter-spacing: 1.1px;
  margin: auto;
  color: #4a4a44; 
  text-align: center;

}

.RectangleButtomsq{
  width: 118px;
  height: 36px;
  border-radius: 5px;
  background-color: #ffffff;
  box-shadow: 1px 2px 4px 0 #e6e6e6;
  border: solid 1px #e6eaee;
}

.Today {
  width: 49px;
  height: 20px;
  font-family: PTSans;
  font-size: 16px;
  letter-spacing: 1.2px;
  text-align: left;
  color: #4a4a4a;
}

.Shapedropdown { 
 margin-left: 25px;
}

Select allOpen in new window

Also ad in the option element the selected attr to have a default option value

Thank you for your answer:
I would like to have the html side as well.
I copied the css from zeplin and I don't want to change them as it is the designer work:

Actually I have problem just with the dropdown so,
I will send you the dropdown design css and if you can send me the html side I will appreciate it.

.Rectangle {
  width: 118px;
  height: 36px;
  border-radius: 5px;
  background-color: #ffffff;
  box-shadow: 1px 2px 4px 0 #e6e6e6;
  border: solid 1px #e6eaee;
}

.Today {
  width: 49px;
  height: 20px;
  font-family: PTSans;
  font-size: 16px;
  letter-spacing: 1.2px;
  text-align: left;
  color: #4a4a4a;
}
.Shape {
  width: 24px;
  height: 24px;
}

.Shape {
  width: 10px;
  height: 5px;
  background-color: #000000;
}

Select allOpen in new window

Here is how it suppose to look like:

greetings Moti Mashiah , , Your request for this block with a select that has a particular look, is not easy, , at all. I looked at your code and ran it in firefox, and it did not look like the image you show at all.
Below is my attempt to to have something that looks a little like your image .
But I did not use your structure of <div> or any of the class names -

<style>
.flagged-outer {
width: 214px;
height: 219px;
background-color: white;
border: 1px solid black;
font-family: PTSans;
font-size: 14px;
color: #4a4a44;
line-height: 1.14;
letter-spacing: 1.1px;
}

.inner-center {
box-sizing: border-box;
margin: 41px auto 1px auto;
padding: 0 8px;
width: 139px;
height: 139px;
text-align: center;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.31);
}

.inner-center p{
margin: 0;
padding-top: 3px;
font-size: 48px;
color: #ff4d4d;
}

.inner-center select{
width: 94%;
height: 2.5em;
padding:2px;
margin: 4px 0 1px 0;
border-radius:4px;
box-shadow: 1px 2px 4px 0 #ccc;
border:none;
outline:none;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
}

.inner-center label {
position:relative
}

.inner-center label:after {
position: absolute;
right: 7px;
bottom: 1px;
height: 0;
width: 0;
border: 5px solid transparent;
border-top-color: black;
content: "";
}

.inner-center label:before {
content:'';
right:3px;
top:-2px;
width:20px;
height:20px;
background:#fff;
position:absolute;
display:block;
}

</style>

<div class="flagged-outer">
  <div class="inner-center">
  <p>4</p>
  Total Flagged Gripes<br />
  <label><select>
    <option>Today</option>
    <option>toMorrow</option>
    <option>yeSTerday</option>
  </select></label>
  </div>
</div>

Select allOpen in new window

The <select> is a browser system display, and will have some various CSS differences for CSS allowed in display for different browsers. My code above was used in firefox, and not tested in any other browser.

There were several things you had in your HTML and CSS which I did not follow why they were there?
And I do not see why you used the <div> and it's CSS for the "Message" of ->  Total Flagged Gripes    ? This seems to be a message placed by the server side code, which my have many different TEXT for the display there?
It looks close to the image to me?

Thank you for your solution. I will take this as a reference as I can't use any other style:

Please, see below the steps I follow from Zaplin designer.


 Please, let me know if you have any idea.

I just joined to this company and the designer use this tools and send css's to the developers.

Thank you for your time You help me a lot to understand that there is no way to do it with this design tools as they basically bring a wrong design.

I have opened support ticket with zeplin.

You can visit their site and see this tools really interesting. https://Zeplin.io.
Btw, also being successful to do it with my design and yours, but its not what the designer I work with wants.

THank you.